只有一个媒体查询有效。有没有人能建议一下另一个是如何工作的？
只有一个媒体查询有效。有没有人能建议一下另一个是如何工作的？
提问于 2012-10-19 05:41:35
我有一个简单的网页与两个CSS媒体查询。当我调整浏览器的大小时，第一个媒体查询被触发，但我无法让另一个媒体查询工作。顺序似乎是合适的，我的语法也是如此。有谁有什么想法吗？
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>McCann Echo Torre Lazur</title>
<style>
/**********************************************************************************
* Structure
**********************************************************************************/
body: {
}
#wrapper {
width: 960px;
min-height: 500px;
border: 1px solid black;
padding: 2px;
}
#logo {
width: 100px;
height: 100px;
border: 1px solid black;
}
.bioinfo {
border: 1px solid black;
display: inline-block;
width: 315px;
}
ul {
}
/**********************************************************************************
* Media Queries
**********************************************************************************/
/* Screens with resolution less than 1024px width */
@media screen and (max-width: 1024px) {
.bioinfo {
width: 49%;
border-color:#ff0000;
}
#wrapper {
width: 100%;
}
} //end media screen
/* Screens with resolution less than 480px width */
@media screen and (max-width: 700px) {
.bioinfo {
width: 95%;
border-color:#ffffff;
}
#wrapper {
width: 100%;
}
}
</style>
</head>
<body>
<div id='wrapper'>
<header>
<div id='logo'>Logo Here</div>
</header>
<div id='bios'>
<div class='bioinfo'>Bio 1</div>
<div class='bioinfo'>Bio 2</div>
<div class='bioinfo'>Bio 3</div>
<div class='bioinfo'>Bio 4</div>
<div class='bioinfo'>Bio 5</div>
<div class='bioinfo'>Bio 6</div>
</div>
<div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2012-10-19 05:45:22
//end media screen不是有效的注释。去掉它，它就可以工作了。
CSS注释使用/* */语法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12964204
复制相关文章
相似问题
腾讯云开发者
