CSS 中的@media 查询

Question

我有以下 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 
}

Answer 1

您需要将第一个设置为说 "anything smaller than (max-width: 829px), do this"

对于 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 class 添加到正文中，以便您可以在更改框架宽度时看到背景颜色的变化。

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

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

Answer 2

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

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

Answer 3

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

这是一个例子。

/* 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;
    }
}

CSS 中的@media 查询

@media queries in CSS

css

mobile

media-queries