Question

我试图制作一个页面来响应不同的浏览器分辨率，我注意到我必须使用媒体查询，但它不适合我。我将css编码为正常，宽度像素大于900，并且当它在它下面时看起来像电话网页，但是当我降低分辨率时它不会做出反应。

<!DOCTYPE html>
<html>
<head>
    <title>testing 2</title>
    <link type="text/css" rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body">
    <div id ="container">
        <header class="mainHeader">
            <content>
                <p>Page Title, Name,....
                </p>
            </content>
        </header>
        <nav class="leftNav">
            <ul>
            <li><a href="">Home</a></li>
            <li><a href="">body</a></li>
            <li><a href="">education</a></li>
            <li><a href="">project</a></li>
            <li><a href="">education</a></li>
            </ul>
        </nav>
        <div class="mainArticle">
            <article>
                <header>
                    <h2>This is the Main Title</h2>
                </header>
                <content>
                    <p>This is a standalone complete HTML5 and CSS3 
                </p>
            </content>
        </article>
    </div>
    <aside class="sideBar">
        <article>
            <h2>title for side</h2>
            <p> side bar contetnta asd asdasda </p>
        </article>
    </aside>
    <footer class="mainFooter">
        <p>Copyright &copy; </p>
    </footer>
</div>
</body>

这是我的css

body{
        /*color : blue;*/
        font-size:85%;
        font-family:Arial;
        text-align : left;
        background-color : #D0D0D0 ;
    }
    a{
        text-decoration:none;
    }
    @media screen and (max-width:900px){
    #container{
        width :70%;
    }
    .leftNav{
    width :100%;
    margin : 3% 0;
    }
    .mainArticle{
    width :100%;
    margin : 3% 0;
    }
    .sideBar{
    width :100%;
    margin : 3% 0;
    }
}
#container{
    width:100%;
    margin :0px auto;
}

.mainHeader {
    background-color : #666;
    height : 40px;
    border-radius :5px;
    margin : 2% 1%;
}
.mainHeader content p{
    padding : 10px 25px;
    color : #FFF;
}
.leftNav{
    float:left;
    width : 12%;
    background-color : #FFF;
    margin :0 0.5% 2% 2%;
    height:200px;
}

.leftNav ul li{
    margin : 5px;
    display:block;
}
.mainArticle{
float:left;
width: 58%;
background-color : #FFF;
    margin :0 0.5% 2% 0.5%;
height:200px;
}
.sideBar{
float:left;
width: 24%;
background-color : #FFF;
height:200px;
margin :0 2% 2% 0.5%;
}
.mainFooter{
background-color : #666;
height : 40px;
border-radius :5px;
margin : 5% 1%;
clear:both;
}

Answer 1

样式表按从上到下的顺序进行评估。 #container中的@media块将在＆lt; = 900px的屏幕上进行评估，但稍后会在样式表中被另一个#container块覆盖。这就是媒体查询通常放在样式表末尾的原因。

Answer 2

如果你用不同属性的同一个id写css

#container{
    background: red;
}

#container{
    background: black;
}

它会超越第二个

#container{
    background: black;
}

https://jsfiddle.net/82rpsyhk/3/

html页面布局没有响应

2 个答案: