@media宽度大小停留在960px？

Question

@media only screen 
  and (min-device-width: 0px) 
  and (max-device-width: 374px) 
  and (-webkit-min-device-pixel-ratio: 2) { }

对于我的媒体查询我需要最大宽度为374px，但无论如何我的宽度都被卡在960px。我试图将宽度和最大宽度调整为100％或374px。

Answer 1

媒体查询用于根据设备宽度应用某些 CSS样式。媒体查询本身不设置值，但检测设备宽度。他们的工作方式如下（source）：

最小宽度表示：“如果[设备宽度]大于或等于[指定＃]，则执行{...}”

最大宽度表示：“如果[设备宽度]小于或等于[指定＃]，则执行{...}”

所以在你的情况下，你可能想要做这样的事情：

@media only screen 
  and (max-device-width: 374px) 
  and (-webkit-min-device-pixel-ratio: 2) {     
   .container {
     width: 374px;
   }    
}

Answer 2

您正在使用max-device-width属性而不是max-width属性。这两者之间有很大的不同：

1. max-device-width：指某人正在使用的屏幕的实际宽度，即 - 手中屏幕的物理尺寸。这很重要，因为例如一些设备可以将超过2个“CSS”像素塞入一个设备像素中。它也没有考虑浏览器大小调整，它只会影响屏幕大小而不考虑其他因素。

2. max-width：指屏幕的视口，即如果某人调整了浏览器窗口大小，您可以准确定位该视口大小。