html - CSS 媒体查询不能在同一个样式表中工作？

Question

我熟悉响应式设计 + CSS。

但由于某些奇怪的原因，唯一不起作用的媒体查询是移动维度样式。

我正在使用 chrome 来监视正在应用的样式，它只加载最小设备宽度样式。

有人知道为什么会这样吗？

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

<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 假装更改“设备宽度”，方法是拉起检查器(右键单击并检查元素)，然后单击右上角的“显示控制台”按钮(看起来像 > 旁边有三条水平线it) 单击 Emulation 选项卡，然后选择要模拟的设备(选择 iPhone 4，它的最大宽度为 320 [嗯，640，但字体比例因子为 2，即 320。])然后点击 Emulate它将更新“设备宽度”。

即:

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

您的 max-width 是浏览器窗口的宽度。与上述不同的是，在调整大小时确实发生了变化。