Html CSS媒体查询不是'；t在同一个样式表中工作？

我熟悉响应式设计+CSS

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

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

有人知道为什么会这样吗

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

@介质（最大设备宽度：480px）{
/*风格*/
#人物简介
{
宽度：10em；
}
.profilebody_name{
字体大小：90%；
字号：500；
位置：相对位置；
文本阴影：0 0 2pt#000；
}
}
@介质（最小设备宽度：1024px）{
#人物简介
{
宽度：20em；
}
.profilebody_name{
字体大小：90%；
字号：500；
位置：相对位置；
文本阴影：0 0 2pt#000；
}
}

“您的规则是

最大设备宽度

而不是

最大宽度

，这意味着，只要您的显示器宽度大于

480px

，您就不会看到任何不同。请在小屏幕上检查或将其更新为

max width

，以实现响应性设计，而不是自适应设计。”

您可以使用Chrome来假装更改“设备宽度”，方法是拉动Inspector（右键单击并检查元素），然后单击右上角的“显示控制台”按钮（看起来像一个>旁边有三条水平线），单击仿真选项卡，然后选择要仿真的设备（选择iPhone 4，它的最大宽度为320）[嗯，640，但字体比例因子为2，即320.]）然后点击模拟，它将更新“设备宽度”

即：

您的

max device width

是您的显示器的宽度，而不是浏览器窗口的宽度。因此，我的是1920像素。除非我更改显示器的分辨率，否则它不会更改

---

您的

max width

是您浏览器窗口的宽度。与上述不同，在调整大小时会发生变化。

您是在手机上检查这个问题吗？还是只是调整浏览器窗口的大小？因为它显示的是

max device width

而不是

max width

，这意味着，只要您的显示器更宽，您的浏览器窗口就会更宽一个

480px

，你将看不到任何不同。检查小屏幕或将其更新为

max width

，以获得响应性设计，而不是自适应设计。检查你是否有适当的html标记元。我只是调整浏览器窗口的大小。我想浏览器我们能够响应媒体对调整大小的查询@setek@srekoble如果您正在调整浏览器窗口的大小进行测试，我使用的方法是，只需将媒体查询从

max device width

更改为

max width

，

min device width

更改为

min width

，

max width

目标浏览器尺寸。

max device width

，

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;
}
}