缩小的方式如何增加屏幕宽度？

Question

我的笔记本电脑屏幕分辨率为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则{ {1}}将适用。因此，对于我的笔记本电脑屏幕css2应该应用，因为它的屏幕宽度为1366px。

在ZOOM：100％，这很好用，但如果我缩小，css1开始应用，我无法理解这是怎么回事，我的屏幕宽度是固定的，那么缩小如何增加我的屏幕宽度。

我变得非常困惑，我试图了解这个屏幕分辨率，像素，缩放，现在很长时间了，但是不能真正理解它们是如何工作的，请帮忙＃

Answer 1

媒体查询限制了布局宽度，如果达到此值（例如通过缩小窗口，或者在具有指定大小的设备上查看），则已使用其他样式。这就是媒体查询应该如何运作。

Answer 2

缩小时，增加视口大小。当媒体查询引用screen时，他们谈论的是浏览器的视口宽度，而不是物理屏幕的宽度。