How to use media queries in angular component's styles.scss?

Question

I am trying to use media query in component's styles, but when I resize the window, nothing is happens

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

It doesn't work at all, do I need to load some modules or how to fix it. Any help appreciate.

Answer 1

Use following syntax. This is the correct syntax for media query. Hope this helps!!

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

Answer 2

remove query

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

Answer 3

You might want to write different media queries for each breakpoint. Also, the syntax is like below

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

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

Answer 4

A bit simpler way,

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