我正在为我的网站应用 CSS 媒体查询，以便在移动设备和笔记本电脑上运行。 我正在使用以下移动媒体查询
@media only screen and (min-device-width : 321px) and (max-device-width:480px)
笔记本电脑及以下
@media only screen and (min-device-width: 1100px)
问题是，当我对移动设备应用第一个查询，对笔记本电脑应用第二个查询时，移动用户界面是正确的，但笔记本电脑用户界面显示不同的结果。当我从列表中删除移动 css 时，只保留第二个查询 css.laptop用户界面正确。
请指导我哪里做错了...
最佳答案
将其包含在 <head></head> 中(如果你还没有)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
像这样改变你的@media 样式//根据你的要求改变宽度
@media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
现在我试着解释一下也许..:)
@media (max-width:500px)
对于带有 max-width 的窗口的 500px您要应用这些样式。在大多数情况下，在那个尺寸下，你会谈论任何小于桌面屏幕的东西。
@media screen and (max-width:500px)
对于带有 screen 的设备和一个带有 max-width 的窗口的 500px应用样式。除了您指定 screen 之外，这几乎与上述相同而不是 other media types最常见的另一个是 print .
@media only screen and (max-width:500px)
这是一个quote直接来自 W3C 来解释这一点。
The keyword ‘
only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
由于不存在“only”这样的媒体类型，旧版浏览器应忽略样式表。
我尝试在此处提供更多信息，这些信息是从网络上收集的。
@media all and (min-width: 500px) {
}
@media all and (max-width: 500px) and (min-width: 300px) {
}
@media all and (max-width: 299px) {
}
If
这就是媒体查询:逻辑 if 语句。 “如果”这些关于浏览器的事情是真的，请使用里面的 CSS。
And
关键字and。
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
逗号分隔。
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
从技术上讲，这些被视为分隔媒体查询，但实际上是 and or。
Not
用关键字 not 反转逻辑。
@media not all and (max-width: 600px) {
html { background: red; }
}
只是不做 (max-width: 600px) 似乎对我不起作用，因此上面的语法有点古怪。也许有人可以向我解释。请注意，这不仅适用于当前媒体查询，所以如果您使用逗号分隔，它只会影响它所在的媒体查询。另请注意，not 将整个媒体查询的逻辑作为一个整体反转，而不是它的各个部分。 not x and y = not (x and y) ≠ (not x) and y
独家
为确保同一时间只有一个媒体查询有效，请使数字(或其他)成为可能。以这种方式在心理上管理它们可能更容易。
@media (max-width: 400px) {
html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
@media (min-width: 801px) {
html { background: blue; }
}
从逻辑上讲，这有点像一个 switch 语句，只是没有像默认那样使用简单的方法来执行“如果这些都不匹配则执行此操作”。
覆盖
没有什么能阻止多个媒体查询同时为真。在某些情况下使用它可能比将它们全部设置为独占更有效。
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}
媒体查询不会为它们包含的选择器添加特殊性，但源顺序仍然很重要。以上将起作用，因为它们的顺序正确。交换该顺序，在浏览器窗口宽度超过 800 像素时，背景将是红色的，也许是出于好奇。
移动优先
您的小屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变大，您可以覆盖您需要的样式。因此，通常是最小宽度媒体查询。
html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}
桌面优先
您的大屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变小，您可以覆盖您需要的样式。因此，通常是最大宽度媒体查询。
html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}
您可以根据需要将其复杂化。
@media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
请注意 only 关键字旨在防止不支持媒体查询的浏览器不加载样式表或使用样式。不确定曾经/现在有多有用。
关于jquery - 将 css 媒体查询应用于响应式设计时 css 发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23423868/