@media(width: 568px)
{
//style//
}
@media (max-width: 599px) and (min-width: 480px)
{
//style//
}
宽度为568px的媒体查询在chrome中不起作用，但它采用的媒体最大宽度：599px和min-width：480px。在火狐中它运作正常。因为我已经阅读了我的相关问题，我试过并检查我的括号和其他东西。我是媒体查询的新手，所以想知道主要使用的断点和我的铬问题。
答案 0 :(得分：4)
在<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 print的窗口应用该样式。除了指定@media only screen and (max-width:568px)
而不是other media types最常见的另一个only之外，这几乎与上述相同。
only以下是来自W3C的quote来解释这一个。
关键字“
@media all and (min-width: 600px) { } @media all and (max-width: 600px) and (min-width: 300px) { } @media all and (max-width: 299px) { }”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。
由于没有＆＃34; @media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
＆＃34;这样的媒体类型，旧浏览器应该忽略样式表。
我试着在网上收集更多信息。
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
如果
媒体查询是什么：逻辑if语句。 ＆＃34;如果＆＃34;这些事情对于浏览器都是正确的，使用内部的CSS。
和
关键字和。
@media not all and (max-width: 600px) {
html { background: red; }
}
或
逗号分开。
@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; }
}
从技术上讲，这些被视为分离媒体查询，但这是有效的和或。
不会
使用关键字not来反转逻辑。
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}
不这样做（最大宽度：600px）似乎对我不起作用，因此上面的语法略显时髦。也许有人可以向我解释。请注意，这不仅适用于当前媒体查询，因此如果您以逗号分隔，它只会影响它所在的媒体查询。另请注意，不是整个媒体查询的逻辑，而不是整个媒体查询的逻辑。不是x和y =不是（x和y）≠（不是x）和y
<强>异
要确保一次只有一个媒体查询生效，请使数字（或其他）成为可能。通过这种方式进行心理管理可能更容易。
html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}
从逻辑上讲，这有点像一个switch语句，只是没有一个简单的方法来做＆＃34;如果这些都不匹配，那么＃34;像默认一样。
<强>重写
没有什么能阻止同时存在多个媒体查询。在某些情况下使用它可能更有效，而不是将它们全部排除。
html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}
媒体查询不会对它们包含的选择器添加任何特异性，但源顺序仍然很重要。以上将有效，因为它们是正确的订购。交换该订单，在浏览器窗口宽度超过800px时，背景将变为红色，可能不直观。
移动优先
您的小屏幕样式位于常规屏幕CSS中，然后随着屏幕变大，您可以覆盖所需的内容。所以，一般来说，最小宽度的媒体查询。
@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; }
}
桌面优先
您的大屏幕样式位于常规屏幕CSS中，然后随着屏幕变小，您可以覆盖所需的内容。所以，一般来说，max-width媒体查询。
{{1}}
你可以随心所欲地复杂化。
{{1}}
请注意，唯一的关键字旨在阻止非媒体查询支持浏览器不加载样式表或使用样式。不知道有多么有用/仍然有用。
答案 1 :(得分：2)
@media width 是不可能的，它可以是min-width或max-width，也可以是两者。
答案 2 :(得分：0)
在开发网格系统时，我在Chrome中遇到了类似的问题。我正在观察元素检查器触发器中的值，除了一个媒体查询在599px。 CSS中的所有内容都是正确编写的。
对我来说有用的是在我的HTML标记中为视口缩放添加元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过元素检查器缩放窗口，而不会触发查询，但有时会手动调整浏览器窗口的大小。