我有一台分辨率为1366*768像素的笔记本电脑屏幕，这意味着屏幕宽度为1366像素，高度为768像素，当我将屏幕分辨率设置为1366*768时，这是固定的，如果我有一个具有css属性的网页
@media screen and (max-width:1366px){
//css1
}
@media screen and (min-width:1361px) and (max-width:1500px){
//css2
}
这意味着如果设备的屏幕有width的1366px或更小的css1将适用于该页，如果屏幕大于1366px则css2将适用，。所以对于我的笔记本电脑屏幕，css1应该应用，因为它的屏幕宽度为1366px。
在缩放:100%，这工作得很好，但如果我缩小，css2开始应用，我不明白这是怎么发生的，我的屏幕宽度是固定的，所以如何缩小可以增加我的屏幕宽度，。
我变得非常困惑，我试图理解这个屏幕分辨率，像素，缩放，很长一段时间了，但不能真正理解他们是如何工作的，请帮助#
媒体查询限制布局宽度，如果达到这个值(例如通过减少窗口，或者当在具有指定尺寸的设备上查看时)，则已经被不同的样式使用。这就是媒体查询的工作方式。
当你缩小时，你增加了视口大小。当媒体查询提到screen时，他们谈论的是浏览器的视口宽度，而不是你的物理屏幕的宽度。