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

你需要设置你的第一个说“任何小于(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;}
}

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查询

3 个答案: