媒体查询div不改变宽度，但其他一切工作

我想调整div的宽度，当浏览器使用最大宽度减小大小。该div做一切，但改变宽度。我通过chrome浏览器上的开发人员工具查看了它，并且宽度被削减了。怎么了？媒体查询div不改变宽度，但其他一切工作

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>

主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; 
}

来源

2014-10-01 user3173447

什么是您的媒体查询？ – Newtt 2014-10-01 13:33:58

media = screen我只是通过改变浏览器的大小来测试它。如果我没有回答你的问题，我很抱歉。我不确切地知道你的意思。 – user3173447 2014-10-01 13:38:38

@ user3173447你的问题说媒体查询div没有改变宽度，但在你的描述中，根本没有媒体查询 – Huangism 2014-10-01 13:44:47

而不是把media=screen在头部，为您responsive.css文件，使用这样的：

@media (max-width:500px){ 
    .left { 
     width: 800px; 
     background-color: red; 
    } 

    .containerRight { 
     display: none; 
    }

}

点击了解媒体查询的基础知识：和https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries。这应该有助于你开始。

来源

2014-10-01 13:49:42 Newtt

它应该在''中工作，就像你在Moz-Dev链接的第一个例子中看到的那样。我认为它应该是'min-width'而不是max，尽管如果没有完整的代码 – Xareyo 2014-10-01 13:53:22

@Xareyo很难说，你是绝对正确的，它应该。这是一个在CSS中使用它的个人偏好，因为我觉得它更可靠。 – Newtt 2014-10-01 13:56:18

我认为这里的问题的关键是**主要的css被包含在哪里？ – 2014-10-01 13:59:19

媒体查询div不改变宽度，但其他一切工作

回答

相关问题