Angular 15 How to write media queries in component styles?

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

Angular Media Queries

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 huge sizes. Media queries need to write different breakpoints for each device resolution. Size of the different devices

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 15 styles tag to include media queries in scss

Angular 12 introduced the styles tag to include scss styles.

It works in the Angular 15 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*/
    }