Angular 12 How to write media queries in component styles?


This is an short tutorial on how to write a media queries in Angular style components as well as style tag.

Angular Media queries example Media queries in Angular components allows to get following benefits

  • Responsive web design
  • Mobile first UX design

Media queries in CSS helps to target the styles certain sizes - desktop,mobile, Tablet and hug sizes. Media queries need to write a 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 12 styles tag to include media queries in scss

Angular 12 introduced styles tag to include scss styles

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 a 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.