我有以下代码：CSS：不同的媒体中使用同一类查询
@media (min-width: 1200px) {
.color {
color: blue;
}
}
@media (min-width: 992px) {
.color {
color: red;
}
}
@media (min-width: 768px) {
.color {
color: green;
}
}
@media (max-width: 767px) {
}<div class="color">Wow ji</div>无论什么屏幕尺寸，Wow ji只出现在绿色。我在这里做错了什么？
max-width是显示这些样式的最大宽度。比指定号码宽的屏幕不会使用与该规则相关联的样式。同样，最小宽度是显示这些样式的最小宽度。比指定号码窄的屏幕不会使用与该规则关联的样式。我已经改变了你的代码max-width现在它的做工精细的所有媒体查询，只需调整浏览器
@media (min-width : 1200px) {
.color{
color: blue;
}
}
@media (max-width : 992px) {
.color{
color: red;
}
}
@media(max-width:768px){
.color{
color: green;
}
}
@media(max-width:767px) {
.color{
color: yellow;
}
}<div class="color">Wow ji</div>这显然不是最好的答案。 – connexo
在CSS中，它是应用，所以在你的代码的最后一个相应的样式，只要屏幕至少为768px，它就会显示为绿色。
您需要在第一次测试中设置max-width，或者按照相反的顺序进行设置。
你有一个坏的语法和用法，这是每次都不一样。
我会推荐做这样的：
@media screen and (max-width: 768px) { // or whatever screen size
.color {
color: green;
}
}
而且你最好在你的HTML添加<meta>viewport，让您的媒体查询工作的罚款。
一些文档：
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers
因为你说的是在767px以上你想。颜色是绿色的，你需要换你的媒体查询的顺序各地 –
*无论什么屏幕尺寸，'WOW JI'只出现在绿色中。*从你给我们的CSS这是不正确的。在768px以下的分辨率下，它可能不会是绿色的。有趣的是，到目前为止，基于这样一个明显问题的问题得到3个upvotes。 – connexo