@media在CSS中的查询

我有以下的CSS来将页面内容对齐到不同的浏览器大小。但是或者某种原因，它不喜欢第一个@media语句，换句话说，改变其中的任何内容都不会对布局产生任何影响。我使用http://quirktools.com/screenfly/来验证布局。
改变语句的顺序也会搞砸了。我失去了@media在CSS中的查询

你的帮助是极大的赞赏

感谢

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

来源

2016-05-13 Torsten Dreier

首先，您要为大于屏幕尺寸的任何内容定义屏幕尺寸，您可以从中进行媒体查询以了解尺寸。

下面是一个例子。

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

来源

2016-05-13 17:57:39

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

来源

2016-05-13 17:55:17 Darren

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

包括上面的代码转换成HTML运行媒体查询。

来源

2016-05-13 17:55:30

@media在CSS中的查询

回答

相关问题