当应用CSS响应设计的媒体查询时，css得到改变 [英] css getting changed when applying css media queries for responsive design
问题描述
我将css媒体查询应用于我的网站，无论是在移动设备还是笔记本电脑上。
我使用以下媒体查询移动设备
@media only screen and（min-device-width：321px）和（max-device-width：480px）
b
@media only screen and（min-device-width：1100px）
问题是当我应用我的第一个查询移动，第二个为笔记本电脑，移动UI是正确的，但笔记本电脑的UI显示不同的结果。当我从我的列表中删除移动css，
请指导我做错了什么...
包括< head>< / head> （如果没有）
< meta name =viewportcontent =width = device-width，user-scalable = no/> < - user-scalable = yes如果您希望用户允许缩放 - >
更改您的@media样式，因为//根据您的要求更改宽度
@media only screen（max-width：500px）{
//或根据您的需要， $ b}
现在我尝试解释也许..：）
@media（max-width：500px）
$ b b
用于要应用这些样式的 max-width of 500px 在这个大小，你会谈论什么小于桌面屏幕在大多数情况下。
@media screen and（max-width：500px）屏幕和
最大宽度的窗口的设备，$ p>
$ c>
500px应用样式。除了你指定screen，而不是其他媒体类型最常见的另一个是code> @media only screen and（max-width：500px）
a href =http://www.w3.org/TR/css3-mediaqueries/#media0>报价直接从W3C解释这一点。
< blockquote>
关键字' only '也可以用于隐藏旧用户代理的样式表。用户代理必须处理以'only'开头的媒体查询，如同only关键字不存在。
媒体类型为 only ，则旧版浏览器应忽略此样式表。
b $ b我尝试在这里提供一些更多的信息，从web收集。
@media all和（min-width：500px ）{
}
@media all and（max-width：500px）and（min-width：300px）{
}
@media all和（max-width：299px）{
}
p>
如果
这就是什么媒体查询：逻辑if语句。 如果这些事情是真的关于浏览器，使用CSS里面。
和
关键字和。
@media （min-width：600px）and（max-width：800px）{
html {background：red; }
}
或
逗号分隔。
@media（max-width：600px），（min-width：800px）{
html {background：red; }
}
技术上，这些被视为分开媒体查询，或。
不是
b $ b
使用关键字not颠倒逻辑。
@media not all和（max-width：600px） {
html {background：red; }
}
只是不做（max-width：600px）为我工作，因此上面稍微有趣的语法。也许有人可以向我解释。请注意，这不仅适用于当前的媒体查询，因此，如果逗号分隔，它只影响它在的媒体查询。另请注意，不能将整个媒体查询的逻辑作为一个整体，而不是它的个别部分。 not x and y = not（x and y）≠（not x）and 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语句，
$ b p>没有什么阻止多个媒体查询同时成为true。在某些情况下使用它可能更有效，而不是使它们全部排他。
@media（min-width：400px ）{
html {background：red; }
}
@media（min-width：600px）{
html {background：green; }
}
@media（min-width：800px）{
html {background：blue; }
}
媒体查询不会对其包含的选择器添加特殊性，事项。以上将工作，因为它们正确排序。
移动优先
b您的小屏幕样式是在您的常规屏幕CSS，然后随着屏幕变大，你覆盖你需要的。一般来说，最小宽度的媒体查询。
html {background：red; }
@media（min-width：600px）{
html {background：green; }
}
桌面
您的大屏幕样式是在您的常规屏幕CSS，然后随着屏幕变小，你覆盖你需要的。一般来说，最大宽度的媒体查询。
html {background：red; }
@media（max-width：600px）{
html {background：green; }
}
您可以根据需要设置复杂。
@media
只有屏幕和（min-width：100px），
不是全部和（min-width：100px ），
不打印和（最小高度：100像素），
（颜色），
（最小高度：100像素）和和（orientation：landscape）
{
html {background：red; }
}
请注意，唯一的关键字旨在防止非媒体查询支持的浏览器以加载样式表或使用样式。不确定过去/现在是多么有用。
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)
and following for laptop
@media only screen and (min-device-width: 1100px)
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 -->
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)
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)
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)
Here is a quote straight from W3C to explain this one.
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.
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
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
@media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
@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
Reverse the logic with the keyword not.
@media not all and (max-width: 600px) {
html { background: red; }
}
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
Exclusive
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; }
}
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.
Overriding
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; }
}
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.
Mobile First
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; }
}
Desktop First
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.
And for media queries priorites
sources : one two three four five
这篇关于当应用CSS响应设计的媒体查询时，css得到改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
