Question

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

非常感谢任何输入。

我正在使用的代码：

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

Answer 1

您没有发布代码示例，因此我猜测：如果您使用的属性：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

Answer 2

将您的代码更改为 -

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

或者，您可以保留以前的代码，并通过Mozilla Responsive Design View功能检查您的网站在本地计算机中的响应性 - 快捷方式＆＃39; Control + Shift + M＆＃39;

媒体查询未对浏览器调整大小生效

2 个答案: