Can you please explain the behavior of Media Queries?

Question

css

There is this code:

@media (min-width: 320px) { 
  .container {
    width: 1024px;
  }
}

@media (min-width: 1024px)  { 
  .container {
    width: 1124px;
  }

}

As far as I understand, the code should work like this:
1) for all devices with a screen resolution in the range: 320px-1023px, set the container width to 1024px
2) If the screen resolution is greater than or equal to 1024px, set the container width to 1124px
However, the second rule only works when setting permissions starting at 1127px.
I check the permissions in the chrome debugger and don’t understand at all why this happens
Update: I created a clean html file and checked how this media queries would work - everything works as it should.
And on a working project, I observe the above behavior, and in the debugger I do not see any css rules that would affect my code.
Example: take.ms/n8DrX and take.ms/2KNsW
how so?

Answer 1

In general, I found the reason.
The reason was that on the tab on which I tested the project in the browser, the scale was set to 110%.
And it turns out that the scale affects the behavior of media queries and gives such behavior.

Answer 2

htmlbook.ru/css/value/media
https://habrahabr.ru/post/198292/

Answer 3

Your example
With the code
The width of the container, deliberately made smaller for clarity. Everything is working.
Are you confusing CSS PX WIDTH and DEVICE PX WIDTH ?
In order for your media queries to work, they must be loaded last, otherwise the default CSS will override them.