@media(width: 568px)
{
//style//
}
@media (max-width: 599px) and (min-width: 480px)
{
//style//
}
宽度568px的媒体查询不适用于Chrome，但采用的是媒体最大宽度：599px和最小宽度：480px的样式。在fire-fox中，它可以正常工作。当我阅读与我相关的问题时，我尝试并检查了括号和其他内容。我是媒体查询的新手，所以想了解主要使用的断点和我的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是与其他 最常见的其他媒体类型相反print。
@media only screen and (max-width:568px)
这是直接来自W3C 的引文来解释这一点。
关键字“
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; }
}
只是不做（最大宽度：600像素）对我来说似乎不起作用，因此上面的语法有点时髦。也许有人可以向我解释。请注意，这不仅适用于当前的媒体查询，因此，如果用逗号分隔，则只会影响其中的媒体查询。还要注意，不要颠倒整个媒体查询的逻辑，而不是整个查询的逻辑。不是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; }
}
媒体查询没有为它们包含的选择器添加任何特定性，但是源顺序仍然很重要。上面的方法将起作用，因为它们的订购正确。交换该顺序，并且在浏览器窗口宽度超过800px时，背景可能会变成红色，这可能不直观。
移动优先
小屏幕样式位于常规屏幕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; }
}
请注意，唯一关键字旨在防止不支持媒体查询的浏览器不加载样式表或使用样式。不确定曾经/现在仍然有用。
| 归档时间： |
|
| 查看次数： |
1076 次 |
| 最近记录： |