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

Question

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

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

Answer 1

媒体查询用于根据设备宽度应用某些CSS 样式。媒体查询本身不设置值，但检测设备宽度。他们是这样工作的(source):

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

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

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

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