{

Angular 13 How to write media queries in component styles?


It is a short tutorial on how to write media queries in Angular 13 style components as well as style tags.

Angular Media queries example Media queries in Angular components allow getting the following benefits

  • Responsive web design
  • Mobile-first UX design

Media queries in CSS help to target the styles of certain sizes - desktop, mobile, Tablet and hug sizes. Media queries need to write different breakpoints for each device resolution. Size of the different devices

Device Width
Phone with portrait mode min-width:320px
Phone with Landscape mode min-width:480px
Portrait Tablet and iPads min-width:600px
Landscape Tablet and iPads min-width:801px
Laptop and desktops min-width:1025px
High Resolution desktops min-width:1281px

If you want to apply the styles for desktop and laptop devices You can apply the below styles in CSS

@media only screen and (max-width: 1025px) { 
   .div{
       color:red;
   }
}

Angular 13 styles tag to include media queries in scss

Angular 12 introduced the styles tag to include scss styles.

It works in the Angular 13 version.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],

  // Supported from angular version12
  styles: [
    `
    @media only screen and (max-width: 1025px) { 
   .div{
       color:red;
   }
}
    
    `
  ]
})
export class AppComponent {
  title = 'angular app';
}

How to write media queries in angular component CSS styles

app.component.css

  @media screen and (max-width: 1025px) {
      /* Here are some changes*/
    }

   /* Mobile device styles */
    @media screen and (max-width: 480px) {
          /* Here are some changes*/
    }

    ```
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.