我试图制作一个页面来响应不同的浏览器分辨率，我注意到我必须使用媒体查询，但它对我不起作用。我将 css 编码为显示正常，宽度像素 >900，并且在它下面时看起来像电话网页，但当我降低分辨率时它不会使用react。
<!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 © </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;
}
最佳答案
样式表按从上到下的顺序进行评估。 @media 中的 #container block 将在 <= 900px 的屏幕上进行评估，但稍后会被其他 #container block 覆盖在样式表中。这就是媒体查询通常放在样式表末尾的原因。
关于html页面布局没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30491283/