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

Question

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

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

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

Answer 1

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

使用max-width代替max-device-width可能会提供更好的服务。