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

即：

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

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