为响应式设计应用 css 媒体查询时 css 发生变化
Posted
技术标签:
【中文标题】为响应式设计应用 css 媒体查询时 css 发生变化【英文标题】：css getting changed when applying css media queries for responsive design 【发布时间】：2014-06-18 21:15:35 【问题描述】：我正在为我的网站应用 css 媒体查询，以便在移动设备和笔记本电脑上运行。 我正在使用以下移动媒体查询
@media only screen and (min-device-width : 321px) and (max-device-width:480px)
以及笔记本电脑的后续
@media only screen and (min-device-width: 1100px)
问题是当我对移动设备应用第一个查询，对笔记本电脑应用第二个查询时，移动 UI 是正确的，但笔记本电脑 UI 显示不同的结果。当我从列表中删除移动 css 时，只保留第二个查询 css.laptop用户界面是正确的。
请指导我哪里做错了......
【问题讨论】：
【参考方案1】：在<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)
这是直接来自 W3C 的 quote 来解释这一点。
关键字“
only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。
由于没有像“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
关键字和。
@media (min-width: 600px) and (max-width: 800px)
html background: red;
Or
逗号分隔。
@media (max-width: 600px), (min-width: 800px)
html background: red;
从技术上讲，这些被视为分离媒体查询，但实际上是与或。
Not
用关键字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;
请注意，唯一的关键字旨在防止支持非媒体查询的浏览器不加载样式表或使用样式。不确定它曾经/现在有多大用处。
And for media queries priorites
来源：onetwothreefourfive
【讨论】：
您的文章非常有用，先生。我纠正了我的问题，实际上在 css 文件中提供了一个额外的花括号，这造成了问题。但我将只用你的文章进一步设计....以上是关于为响应式设计应用 css 媒体查询时 css 发生变化的主要内容，如果未能解决你的问题，请参考以下文章