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

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