Angular 13 How to write media queries in component styles?

This is an short tutorial on how to write a media queries in Angular 13 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) { 

Angular 13 styles tag to include media queries in scss

Angular 12 introduced styles tag to include scss styles.

It works in Angular 13 version

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

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

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

How to write a media queries in angular component css styles


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

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

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
You'll get a notification every time a post gets published here.