媒体查询不起作用

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

<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/

来源

2014-01-29 user2013488

你会使用(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)

来源

2014-01-29 20:32:51

-1

对不起乡亲但这个问题只是变得毫无意义：Firefox Dev版本仅进行了升级并更改了设备屏幕的显示方式：您无法再选择屏幕尺寸b使用下拉框选择y像素;您现在必须选择将显示尺寸的设备名称。

当我打开浏览器时，Firefox已经发布了更新，我一直有问题。

带萤火虫的普通Firefox浏览器现在更具响应能力。我一直在处理的一些问题是，当我设置“min-width 320px”等限制时，FDE只会以更大的分钟数进行更改，例如380px。这在更新版本中不会改变。

来源

2017-06-28 20:56:31 etkronberg

这个问题没有变得没有意义。您仍然可以调整浏览器的大小，而无需使用开发工具。这个问题也没有问到开发工具。最初的问题是因为'max-device-width'与'max-width'。 FF Dev现在已经有几个版本的设备下拉菜单了。 – disinfor

媒体查询不起作用

回答

相关问题