Question

我熟悉响应式设计+ CSS。

但由于一些奇怪的原因，唯一无效的媒体查询是移动维度样式。

我正在使用chrome来监控正在应用的样式，它只加载min-device-width样式。

有谁知道为什么会这样？

我的索引文件中也有以下内容。 已更新

<link href="styles.css" rel="stylesheet" type="text/css">

@media (max-device-width: 480px){
/* Styles */
#profilebody_avatar
{
width: 10em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}
@media (min-device-width: 1024px){
#profilebody_avatar
{
width: 20em;
}
.profilebody_name{
font-size: 90%;
font-weight: 500;
position: relative;
text-shadow: 0 0 2pt #000;
}
}

Answer 1

“您的规则是max-device-width而不是max-width，这意味着，只要您的监视器比480px更宽，您就不会看到任何不同的内容。小屏幕或将其更新为max-width以获得响应式设计而非自适应。“

您可以使用Chrome假装通过拉起Inspector（右键单击并检查元素）来假装更改“设备宽度”，然后单击右上角的“显示控制台”按钮（看起来像下面有三条水平线的＆gt;单击Emulation选项卡，然后选择要模拟的设备（选择iPhone 4，它的最大宽度为320 [well，640但字体比例因子为2，即320.]）然后点击模拟，它将更新“设备宽度”。

即：

您的max-device-width是监视器的宽度，而不是浏览器窗口的宽度。所以，我的是1920px。除非我改变显示器的分辨率，否则它不会改变。

您的max-width是浏览器窗口的宽度。与上述不同，会在调整大小时发生更改。

CSS媒体查询在同一样式表中不起作用？

1 个答案: