1

2つのCSSメディアクエリを含む単純なWebページがあります。ブラウザのサイズを変更すると、最初のメディアクエリが実行されますが、他のメディアクエリを機能させることができません。順序は適切であるように思われるので、私の構文も適切です。誰かアイデアはありますか？

    <!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>
4

1 に答える 1

2

//end media screenは有効なコメントではありません。それを削除すると、これが機能します。

CSS コメントは/* */構文を使用します。

于 2012-10-18T21:45:22.470 に答える