为什么当我缩小浏览器窗口时媒体查询不会激活？

【问题标题】：Why won't the media query activate when I make the browser window smaller?为什么当我缩小浏览器窗口时媒体查询不会激活？
【发布时间】：2012-12-18 03:35:14
【问题描述】：

很抱歉提出一个简单的问题，但是当窗口变小或使用移动设备时，我正在尝试使用不同的样式表。当我将浏览器窗口缩小时没有任何反应。这是媒体查询。

<link rel="stylesheet" type="text/css" href="css.css" />
    <link rel="stylesheet" type="text/css"
     media="screen and (max-device-width:500px)"
     href="2ndCss.css" />

有人可以解释为什么它没有做任何事情吗？我尝试将最大设备宽度变小，并尝试将其设置为最大宽度。

【问题讨论】：

标签： html css media-queries

【解决方案1】：

如果您仔细注意您的媒体属性中的内容，您会注意到您使用的是max-device-width。这意味着物理设备的屏幕尺寸必须为500px 或更小才能启动媒体查询。调整浏览器大小不会改变屏幕的物理尺寸。

使用max-width 而不是max-device-width 可能会更好地为您服务。

【讨论】：

有什么办法可以同时做到吗？
@redelman431 是的，有。使用以下内容：screen and (max-width: 500px) and (max-device-width: 500px)。请参阅此处了解更多信息：w3.org/TR/css3-mediaqueries/#width