@media(width: 568px)
{
//style//
}
@media (max-width: 599px) and (min-width: 480px)
{
//style//
}
宽度为 568px 的媒体查询在 chrome 中不起作用，但它采用媒体 max-width: 599px 和 min-width: 480px 的样式。在火狐中它工作正常。当我阅读了我的相关问题时，我尝试检查了我的括号和其他东西。我是媒体查询的新手，所以想了解主要使用的断点和我的 chrome 问题。
【问题讨论】：
标签： css google-chrome
将此包含在<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: 568px) {
// or as per your needs, as I try to explain below
}
现在我试着解释一下..:)
@media (max-width:568px)
对于具有max-width 或568px 的窗口，您要应用这些样式。在大多数情况下，在那个尺寸下，你会谈论比桌面屏幕更小的任何东西。
@media screen and (max-width:568px)
对于带有screen 的设备和带有max-width 的568px 的窗口应用该样式。这几乎与上述相同，除了您指定 screen 而不是 other media types 最常见的另一个是 print。
@media only screen and (max-width:568px)
这是直接来自 W3C 的 quote 来解释这一点。
关键字“
only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。
由于没有像“only”这样的媒体类型，旧版浏览器应该忽略样式表。
我尝试在此处提供更多信息，这些信息是从网络收集的。
@media all and (min-width: 600px) {
}
@media all and (max-width: 600px) and (min-width: 300px) {
}
@media all and (max-width: 299px) {
}
如果
这就是媒体查询：逻辑 if 语句。 “如果”这些关于浏览器的事情是真实的，请使用里面的 CSS。
和
关键字和。
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
或者
逗号分隔。
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
从技术上讲，这些被视为分离媒体查询，但实际上是与或。
不是
用关键字not反转逻辑。
@media not all and (max-width: 600px) {
html { background: red; }
}
只是不这样做 (max-width: 600px) 似乎对我不起作用，因此上面的语法有点时髦。也许有人可以向我解释。请注意，这不仅适用于当前的媒体查询，因此如果用逗号分隔，它只会影响它所在的媒体查询。另请注意，不反转整个媒体查询的逻辑，而不是它的各个部分。非 x 和 y = 非（x 和 y）≠（非 x）和 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; }
}
注意，唯一的关键字旨在防止支持非媒体查询的浏览器不加载样式表或使用样式。不确定它曾经/现在有多大用处。
【讨论】：
在开发网格系统时，我在 Chrome 中遇到了类似的问题。我正在查看元素检查器触发器中除一个 599px 的媒体查询之外的所有值。 CSS 中的所有内容都正确编写。
对我有用的是在我的 HTML 标记中添加用于视口缩放的元标记，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在没有它的情况下通过元素检查器缩放窗口永远不会触发查询，但有时会手动调整浏览器窗口的大小。
【讨论】：
@media width 是不可能的，它是最小宽度或最大宽度，或两者兼而有之。
【讨论】：