Media queries not working when zooming out?

Question

css

@media (max-width: 320px) {
  
}

@media (max-width: 480px) {
  
}

@media (max-width: 768px) {
  
}

@media (max-width: 992px) {
  
}

@media (max-width: 1200px) {
  .top-mnu 
    .a
      font-size: 15px;
  .top-phone 
    .li 
      .a
        font-size: 20px;
}

Answer 1

work https://jsfiddle.net/zm0on8y3/show/

Answer 2

Maybe a syntax problem?
If curly braces are not used when working with a selector {}, then they should not be used with media queries either?
Try like this:

@media (max-width: 1200px)
  .top-mnu 
    .a
      font-size: 15px;
  .top-phone 
    .li 
      .a
        font-size: 20px;

Answer 3

so your last one @mediawill act on all screens smaller than 1200px wide and will interrupt all previous ones you wrote @media. Either change their order, from larger to smaller, or rewrite @mediaunder min-width
Well, you were also correctly written about brackets. If you use the syntax without brackets, they should not be here either

Answer 4

Try like this

@media screen and (max-width: 320px) {
   тут код
}