Media is applied not on those values ​​which are specified, a help?

Question

css

In general, I completed the layout, sat down for adaptation, I write the first request, let's say

@media screen and (max-width: 1600px) {
    body {
        display: none;
    }
}

Logically, with a width of 1600px, the entire body should become display none, but this happens not at 1600, but at 1280 px.
There are no more requests, it is the only one, if you add new ones, it is also unclear how they are calculated and work at a resolution several times smaller , the first time I encounter this
Meta is also worth it - meta(name="viewport" content="width=device-width, initial-scale=1.0")
The funny thing is, the same media entry works in a different layout, but not in this one

Answer 1

Because according to your logic, it works at ANY width not more than 1600px, and 1280px is included in this category. Therefore, you must add a condition with min-width.
Secondly, media queries work in cascading order, so the order of the media queries in the CSS file is also important, in case you don't want to specify min-width. Each request will always override the previous one.

Answer 2

So max-width: 1600px is the maximum width! And the fact that at 1280, so there is a tablet!
write min-width: 1600px - this is from 1600 and more
According to the idea, it should be like this,

.css {
  код десктоп 
  // тоесть выполняется всегда
}
@media (max-width: 1023px) {
  .css {
    код планшет 
      // выполняется если разрешение меньше 1023рх
  }
}
@media (max-width: 767px) {
  .css {
    код мобила
    // выполняется если разрешение меньше 767px
  }
}

WITHOUT screen and

Answer 3

Check if there is page scaling in the browser or globally in the system