Question

我有一个包含两个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>

Answer 1

//end media screen不是有效评论。删除它，这是有效的。

CSS注释使用/* */语法。

只有一个媒体查询工作。任何人都可以建议另一个如何工作？

1 个答案: