首先,容器 被赋予80% 的宽度
,当它被媒体查询
改变时> 对于 992px 的 width
它不会改变,但是当为相同的媒体查询指定 background-color
时它会改变。
JSfiddle-https://jsfiddle.net/q4hqq2ro/
HTML
<div class="container">
<header>
<div class="logo"></div>
<h1 > <span class="light">Spirituality</span> Forums</h1>
<div class="register user">Register</div>
<div class="login user">Login</div>
<span class="close">X</span>
<div class="search-icon"><a href=""></a></div>
<input type="search" class="search">
<div class="clear"></div>
</header>
<div class="advertisment">
</div>
</div> <!-- container -->
CSS
@import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
/*-----------------Header----------------------*/
.container{
max-width: 80%;
margin:0 auto;
}
header{
background-color: #b47941;
padding-left: 1%;
margin: 0 auto;
display: block;
}
.logo{
background: url("images/small.jpg") no-repeat;
width: 150px;
height:90px;
float: left;
}
header h1 {
display: inline-block;
font:200% cursive ;
color: white;
line-height: 90px;
margin-left: 2%;
color: #daccb7;
z-index: 2;
}
.light{
color: #f5f3ea;
}
.clear{
clear: both;
display: inline-block;
}
/*---------------register-------------*/
.register{
margin-left: 2%;
margin-right: 2%;
}
.user{
display: inline-block;
float: right;
color: white;
margin-top: 62px;
background: #e6e3d7;
width:10%;
font: 100%/160% arial;
text-align: center;
color: #a35800;
line-height: 187%;
cursor: pointer;
}
/*---------------search-------------*/
.search{
display: none;
position: absolute;
margin-top: 64px;
right: 30%;
width: 18%;
height: 26px;
}
.close{
color: grey;
position: absolute;
top: 68px;
right: 30%;
display: none;
z-index: 2;
cursor: pointer;
background: #e6e3d7;
width: 2%;
}
input[type="search"]{
border: 0;
color: #a35800;
background: #e6e3d7;
padding: .5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
.search-icon{
background:url("images/search.gif") no-repeat;
width:32px;
height:23px;
display: inline-block;
float: right;
margin-right: 2%;
margin-top: 66.5px;
cursor: pointer;
}
/*-----------advertisment------------*/
.advertisment{
height: 320px;
}
/*-----------Media Queries----------*/
@media (max-width : 992px) {
.container {
width: 90%;
background: green;
}
}
最佳答案
问题是你之前设置的:
.container{
max-width: 80%;
margin:0 auto;
}
并且媒体查询不会覆盖它。我测试了您的代码,将上一行中的最大宽度替换为宽度,或者在媒体查询中使用最大宽度:90%。这样就可以了。
干杯。
关于css - 宽度在媒体查询中不会改变,其余属性会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32163086/