8

我正在使用媒体查询为客户制作网站的移动版本。当我调整浏览器大小时，媒体查询不会生效，但是当在每个设备上查看网站时它们会生效 - 我只是好奇为什么当我调整浏览器窗口大小时媒体查询不会生效即火狐。

非常感谢任何输入。

我正在使用的代码：

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) {
    #container {
        width: 100% !important;
        }
    }
4

2 回答 2

32

如果您使用属性：max-device-width 或 min-device-width，它将仅适用于具有该宽度的设备，并且将忽略手动调整浏览器大小。

您应该将属性更改为：max-width / min-width。

@media screen and (min-width: 1024px){
  /* some CSS here */
}

在这里检查：

在 CSS 媒体中，宽度和设备宽度之间的差异可能有点混乱，所以让我们稍微解释一下。device-width 是指设备本身的宽度，也就是设备的屏幕分辨率。

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

于 2013-07-30T18:09:13.807 回答
4

将您的代码更改为 -

@media only screen 
and (min-width : 320px) 
and (max-width : 720px) {
#container {
    width: 100% !important;
    }
}

或者，您可以保留以前的代码并通过 Mozilla 响应式设计视图功能检查您网站在本地计算机中的响应性质 - 快捷方式“Control+Shift+M”

于 2015-03-25T18:18:54.107 回答