CSS 中的@media 查询答案

【问题标题】：@media queries in CSSCSS 中的@media 查询
【发布时间】：2016-05-14 02:06:44
【问题描述】：

我有以下 CSS 来对齐不同浏览器大小的页面内容。但是或出于某种原因，它不喜欢第一个 @media 语句，换句话说，更改其中的任何内容都不会对布局产生任何影响。我使用http://quirktools.com/screenfly/ 来验证布局。
更改语句的顺序也会使事情变得混乱。我迷路了

非常感谢您的帮助

谢谢

@media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
@media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
@media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
@media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE 
}

【问题讨论】：

标签： css mobile media-queries

【解决方案1】：

首先，您要为大于的任何内容定义屏幕尺寸，然后从那里对介于两者之间的尺寸进行媒体查询。

这是一个例子。

/* Large desktop */
@media only screen and (min-width :75.000em) {
    .test {
        display: none;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :61.250em) and (max-width:74.938em) {
    .test {
        display: block;
        color: #FF0;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :48.000em) and (max-width:61.188em) {
    .test {
        display: none;
    }
}

/* Landscape phone to portrait tablet */
@media only screen and (min-width :30.063em) and ( max-width :47.938em) {
    .test {
        display: none;
    }
}

/* portrait phones and down */
@media only screen and (max-width :30.000em) {
    .test {
        display: block;
        color: #FF0;
    }
}

【讨论】：

【解决方案2】：

<meta name="viewport" content="width=device-width  initial-scale=1" />

将上述代码包含到 html 中以运行媒体查询。

【讨论】：

【解决方案3】：

你需要设置你的第一个说“任何小于(max-width: 829px)的东西，都这样做”

对于 EG：

@media (max-width: 829px) {
 .bg {background-color:blue;}
}
@media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
@media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
@media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}

在这个Plunker 上查看它的效果 - 我将bg 类添加到正文中，这样您就可以在更改框架宽度时看到背景颜色的变化。

您也可以通过以下方式简化查询：

@media (max-width: 829px) {
 .bg {background-color:blue;}
}
@media (min-width: 830px){
.bg {background-color:red;}
}
@media (min-width: 1026px) {
.bg {background-color:green;}
}
@media (min-width: 1590px) {
.bg {background-color:yellow;}
}

【讨论】：