{

Angular 15 How to write media queries in component styles?


Angular Media queries example

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

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 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*/
    }
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.