Angular 2 web app using fluid layout not responding to more than one screen sizes

Question

Here, I am creating a new web application using Angular 2 framework and applying media query for responsiveness. I am new to this design. I had used two screen breakpoints i.e 600 and 960 and trying to test the responsiveness accordingly. But one of my query not getting apply i.e. 600px. This is my code,

@media screen and (max-width: 600px) {
mat-card{
    width:50%;
     height:60%;
    margin:9% 9% 9% 19%;
       font-size:8px;
      }

 .fullwidth{
  width:50%;
  height:50%;
  font-size:11px;
  padding:10px;
 }
 mat-card-title{
   font-size:13px;
   font-weight:bold;
 }
 mat-card-subtitle{
  font-size:11px;
 }
}

    @media screen and (max-width: 960px) {
    mat-card{
    width:50%;
     height:60%;
    margin:9% 9% 9% 19%;
       font-size:8px;
      }

 .fullwidth{
  width:90%;
  height:50%;
  font-size:11px;
  padding:10px;
 }
 mat-card-title{
   font-size:13px;
   font-weight:bold;
 }
 mat-card-subtitle{
  font-size:11px;
 }
}

But in actual browser only media query for 960 is getting applied on 'fullwidth' class.

How can I apply media query to 600px size?

Also how many screen sizes needs to be queried for proper responsive design?

Answer 1

see if this helps you: https://codepen.io/panchroma/pen/pLaJZy

Remember that all CSS rules that are applicable will be applied to an element, and CSS rules cascade. With your original CSS, if the viewport was say 500px, your two media queries would be true, so the last one would be the styling that would be applied.

Instead of your original

@media screen and (max-width: 600px) {   
...  
}  
@media screen and (max-width: 960px) {  
 ...  
}  

Consider something like the following

@media screen and (max-width: 600px) {   
 ...  
 }  
 @media screen and (min-width:601px) and (max-width: 960px) {  
 ...  
 }    

With the above CSS, if the viewport is 500px the first media query will apply, if the viewport is 700px the second media query will apply.

Hope this helps!