媒体查询不起作用

Posted 2023-03-06

【中文标题】媒体查询不起作用

【英文标题】：Media queries doesn't work

【发布时间】：2014-02-21 21:36:12

【问题描述】：

有谁知道为什么我的媒体查询代码不起作用？

 <div class="box"></div> 

 .box 
     background-color: red;
     width: 100%;
     height: 50px;
  

 @media only screen and (max-device-width: 768px)  
     .box border: 5px solid blue;
 

http://jsfiddle.net/N9mYU/

【参考方案1】：

您将使用(max-width: 768px) 而不是(max-device-width: 768px)。查看max-device-width/max-width 之间的区别here。

如果您希望媒体查询在移动设备上工作，请添加视口：

<meta name="viewport" content="width=device-width, initial-scale=1">

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) 
    .box 
        border: 5px solid blue;
    

延伸阅读：A pixel is not a pixel/Viewport width and screen width (mdn)

【参考方案2】：

抱歉，这个问题刚刚变得没有意义：Firefox 开发版刚刚升级并更改了设备屏幕的呈现方式：您不能再使用下拉框按像素选择屏幕尺寸；您现在必须选择将显示其尺寸的设备名称。

当我打开浏览器时 Firefox 发布更新时，我一直遇到问题。

带有 firebug 的常规 Firefox 浏览器现在响应速度更快。我一直在处理的一些问题是，当我设置诸如“min-width 320px”之类的限制时，FDE 只会在更大的最小值处执行更改，例如 380px。这在更新版本中没有改变。

【讨论】：

这个问题没有实际意义。您仍然可以在不使用开发工具的情况下调整浏览器的大小。这个问题也没有询问开发工具。最初的问题是因为max-device-width 与max-width。 FF Dev 现在有几个版本的设备下拉列表。