将 css 媒体查询应用于响应式设计时，css 会发生变化 [英] css getting changed when applying css media queries for responsive design
问题描述
我正在为我的网站应用 css 媒体查询，以便在移动设备和笔记本电脑上运行.我正在使用以下移动媒体查询
I am applying css media queries for my website to work both in mobile as well laptop. I m using following media query for mobile
@media only screen and (min-device-width : 321px) and (max-device-width:480px)
和以下笔记本电脑
@media only screen and (min-device-width: 1100px)
问题是当我对移动设备应用我的第一个查询，对笔记本电脑应用第二个查询时，移动用户界面是正确的，但笔记本电脑用户界面显示不同的结果.当我从列表中删除移动 css 时，只保留第二个查询 css.laptop用户界面正确.
Issue is when i apply my first query for mobile,and second one for laptop,mobile UI is correct but the laptop UI is showing different results.When i remove mobile css from my list,and keeps only second query css.laptop UI is correct.
请指导我哪里做错了...
Please guide me where i m doing wrong...
推荐答案
在 中包含这个(如果你还没有)
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
改变你的@media 风格//根据你的要求改变宽度
change you @media style as this // change width as per your requirements
@media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
现在我试着解释一下……:)
Now I try to explain maybe..:)
@media (max-width:500px)
对于 max-width 为 500px 的窗口，您要应用这些样式.在大多数情况下，在那个尺寸下，您会谈论比桌面屏幕更小的任何东西.
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
@media screen and (max-width:500px)
对于具有 screen 和 max-width 为 500px 的窗口的设备应用该样式.除了您指定 screen 而不是 其他媒体类型 最常见的另一种是print.
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
@media only screen and (max-width:500px)
这是直接来自 W3C 的 引用 来解释这一点.
Here is a quote straight from W3C to explain this one.
关键字only"也可用于对较旧的用户代理隐藏样式表.用户代理必须处理以only"开头的媒体查询，就好像only"关键字不存在一样.
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"这样的媒体类型，旧浏览器应该忽略样式表.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
我试着在这里放一些从网上收集的更多信息.
I try to put some more information here, gathered from web.
@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.
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
关键字和.
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
逗号分隔.
@media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
从技术上讲，这些被视为单独的媒体查询，但这实际上是和或.
Technically these are treated like to separate media queries, but that is effectively and or.
Not
使用关键字 not 反转逻辑.
Reverse the logic with the keyword 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
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
独家
为确保同一时间只有一个媒体查询有效，请制作可能的数字(或其他任何内容).以这种方式在精神上管理它们可能更容易.
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
@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 语句，只是没有像 default 那样简单的方法来执行如果这些都不匹配，则执行此操作".
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
覆盖
没有什么可以阻止多个媒体查询同时为真.在某些情况下使用它可能比让它们全部排他更有效.
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
@media (min-width: 400px) {
html { background: red; }
}
@media (min-width: 600px) {
html { background: green; }
}
@media (min-width: 800px) {
html { background: blue; }
}
媒体查询对它们包含的选择器没有任何特殊性，但源顺序仍然很重要.以上将起作用，因为它们的顺序是正确的.交换该顺序，当浏览器窗口宽度超过 800 像素时，背景会是红色的，这可能是出于好奇.
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
移动优先
您的小屏幕样式在您的常规屏幕 CSS 中，然后随着屏幕变大，您可以覆盖您需要的样式.所以，一般来说是最小宽度的媒体查询.
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
@media (min-width: 600px) {
html { background: green; }
}
桌面优先
您的大屏幕样式在您的常规屏幕 CSS 中，然后随着屏幕变小，您可以覆盖您需要的样式.所以，一般来说是最大宽度的媒体查询.
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
@media (max-width: 600px) {
html { background: green; }
}
您可以随心所欲地使用它.
You can be as complex as you want with this.
@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; }
}
请注意，唯一的关键字旨在防止支持非媒体查询的浏览器不加载样式表或使用样式.不确定它曾经/现在有多大用处.
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
这篇关于将 css 媒体查询应用于响应式设计时，css 会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
