当应用css媒体查询进行响应式设计时，css被更改

我正在为我的网站应用css媒体查询，以便在移动设备以及笔记本电脑中工作。我米使用下列媒体查询移动当应用css媒体查询进行响应式设计时，css被更改

@media only screen and (min-device-width : 321px) and (max-device-width:480px)

及以下笔记本电脑

@media only screen and (min-device-width: 1100px)

问题是，当我申请我的第一个查询移动，和第二个笔记本电脑，移动设备用户界面是正确的，但笔记本电脑的用户界面显示不同的结果。当我从我的列表中删除移动css，并保持只有第二个查询css.laptop UI是正确的。

请指引我在那里即时做错了......

来源

2014-05-02 user3575612

包括这<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的设备并用500pxmax-width窗口应用的样式。除了你指定的是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

使用关键字不反转逻辑。

@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; } 
}

注唯一的关键字是为了防止非媒体查询支持的浏览器不加载样式表或使用的样式。不知道这是多么有用/仍然是。

And for media queries priorites

来源：由你one two three four five

来源

2014-05-02 08:36:56 4dgaurav

非常有帮助的文章先生。我纠正了我的问题，居然有一个大括号额外的CSS文件中提供，这是产生问题。但是我将设计进一步只与你的aticle ... – user3575612

我的荣幸.. :) – 4dgaurav

当应用css媒体查询进行响应式设计时，css被更改

回答

相关问题