媒体查询div不改变宽度，但一切工作 [英] Media query div not changing width but everything else works
问题描述
我尝试调整div的宽度，当浏览器减小的大小使用max-width。除了改变宽度之外，div只做一切。我已经通过开发工具在Chrome浏览器上查看它，宽度被削减了。发生了什么问题？
I am trying to adjust the width of a div when the browser decreases in size using max-width. The div does everything but change width. I have looked at it through the developer tools on the chrome browser and the width is slashed out. What's wrong?
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="responsive.css" />
</head>
<body>
<div class="left">
</div>
<div class="containerRight">
<div class="incontainer">
<div class="post"> Aifjoisdjfiosjdfoisdjfoidsjfoisjd</div>
</div>
</div>
</body>
</html>
MAIN CSS：
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main {
min-width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
margin-left: -300px;
border-bottom: solid 1pt #ADADAD;
}
.containerRight {
float:left;
width:100%;
height: 100%;
overflow-y: scroll;
}
.left {
float:left;
height: 100%;
width: 300px;
border-right: solid 1px #C9C9C9;
-webkit-box-shadow: 1px 0 2px #888888;
-moz-box-shadow: 1px 0 2px #888888;
box-shadow: 1px 0 2px #888888;
}
RESPONSIVE CSS
.left {
width: 800px;
background-color: red;
}
.containerRight {
display: none;
}
推荐答案
c $ c> media = screen 在您的responsive.css文件中，使用：
Instead of putting the media=screen in the head, for your responsive.css file, use this:
@media (max-width:500px){
.left {
width: 800px;
background-color: red;
}
.containerRight {
display: none;
}
}
在此处了解媒体查询的基本知识： http://webdesignerwall.com/tutorials/responsive -design-in-3-steps 和 https： //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 。这应该可以帮助你开始。
Learn the basics about media queries here: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. This should help you get started.
这篇关于媒体查询div不改变宽度，但一切工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
