各种浏览器的支持似乎有所不同.
检查链接
Firefox:黑色,带白色文字.
Opera,Chrome,IE9:蓝色与黑色文本.
哪个是正确的,我将如何使其保持一致？
代码
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
有趣的是,似乎在条件内嵌套媒体查询@import似乎有效.
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
@import url(media.css) screen and (min-width: 480px);
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body …我想为打印页面的人(media = print)和在手机上浏览的人显示相同的CSS样式集.有没有办法组合CSS媒体查询？
就像是
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
我正在用AngularJS和SCSS编写一个站点.我处于移动阶段的开发阶段,我很快发现(对于这个项目)我需要一种方法来使用@media查询来定位多个断点.所以我通过这个SO答案和这个CSS Tricks Post以及SO上的其他多个答案找到了.然后我将我发现的解决方案实现到测试用例中,请参阅下面的代码片段进行测试.
main {
background-color: grey;
height: 100%;
min-height: 1000px;
@media (max-width: 992px) {
background-color: red
}
@media (max-width: 768px) {
background-color: lightcoral
}
@media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
@media (max-width: 768px),
(max-width: 768px) and (orientation: landscape) {
background-color: lightblue;
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main> …