缩小如何增加屏幕宽度？答案

【问题标题】：How zoom out increase the screen width?缩小如何增加屏幕宽度？
【发布时间】：2016-11-09 16:32:29
【问题描述】：

我有分辨率为 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
 }

这意味着如果设备的屏幕具有1366px 或小于css1 的width 将适用于该页面，如果屏幕大于1366px 则css2 将适用。所以对于我的笔记本电脑屏幕 css1 应该应用，因为它的屏幕宽度为 1366px 。

在 ZOOM:100% ，这工作正常，但如果我缩小，css2 开始申请，我无法理解这是怎么发生的，我的屏幕宽度是固定的，所以缩小如何可以增加我的屏幕宽度，。

我变得很困惑，我想了解这个屏幕分辨率，像素，缩放，现在很长一段时间，但不能真正了解它们是如何工作的，请帮助#

【问题讨论】：

@k2a 在这里查看这个例子w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery，然后放大和缩小，你会明白我在说什么，右边部分的宽度保持不变，但颜色仍然会改变

【解决方案1】：

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

【讨论】：

我明白我们什么时候缩小窗口，但我说的是当我们缩小屏幕尺寸时如何增加，
来自w3.org/TR/css3-mediaqueries 4.3。 device-width 值：适用于：视觉和触觉媒体类型接受最小/最大前缀：yes “设备宽度”媒体特征描述了输出设备的渲染表面的宽度。对于连续媒体，这是屏幕的宽度。对于分页媒体，这是页面大小的宽度。

【解决方案2】：

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

【讨论】：