How do media queries work, why doesn't it work?

Question

css

Greetings, I can’t understand how media queries work, for all video tutorials and articles, for example, such a media query is indicated, as far as I understand, this query should work on a Laptop, I go to Google Chrome, go to code editing and specify this width above (992px ) and in the media query I change all the elements so that everything looks normal with this browser width BUT when I open the site on a laptop, the main Desktop version opens, and it does not look normal because it is much wider than the browser window. At the same time, when I make a request , everything works as I need . What am I doing wrong?
@media screen and (max-width: 992px)
@media screen and (max-device-width: 1400px)

Answer 1

max-width means "to" (inclusive)
min-width means "from" (inclusive)
i.e. your styles are applied to the browser width up to 992px inclusive
Starting from 993, these styles are disabled.
max-device-width: 1400px
means "display size up to 1400". Display (device), not browser.

Answer 2

So what resolution do you have on your laptop? As far as I know, the minimum payout on laptops is 1024px