媒体查询 div 不改变宽度，但其他一切正常答案

【问题标题】：Media query div not changing width but everything else works媒体查询 div 不改变宽度，但其他一切正常
【发布时间】：2014-11-26 08:48:39
【问题描述】：

当浏览器使用 max-width 减小大小时，我正在尝试调整 div 的宽度。除了改变宽度，div 什么都做。我通过 chrome 浏览器上的开发人员工具查看了它，宽度被削减了。怎么了？

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

响应式 CSS

.left {
   width: 800px;
   background-color: red;
}

.containerRight {
   display: none;
}

【问题讨论】：

您的媒体查询是什么？
media=screen 我只是通过更改浏览器的大小来测试它。如果我没有回答你的问题，我很抱歉。我不明白你的意思。
@user3173447 你的问题是媒体查询 div 没有改变宽度，但在你的描述中，根本没有媒体查询
我假设主 css 位于 responsive.css 以外的文件中（HTML 中没有提及）？如果是这样，您是否在 responsive.css 之后包含 main.css？
在<head>

标签： html css width media-queries

【解决方案1】：

不要将media=screen 放在头部，而是在您的 responsive.css 文件中使用：

@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。这应该可以帮助您入门。

【讨论】：

它应该在<head> 中工作，正如您在 Moz-Dev 链接上的第一个示例中看到的那样。我认为应该是 min-width 而不是 max，尽管没有完整代码很难判断
@Xareyo 你是绝对正确的，它应该。在 CSS 中使用它是个人偏好，因为我发现它更可靠。
我认为问题的关键在于 main css 究竟包含在哪里？
@Newtt 不幸的是，这个问题让我们不清楚 main css 在哪里；它在 responsive.css 中吗？在它自己的文件 main.css 中（未在 HTML 中显示）？我的倾向是它在 main.css 中，并且该文件包含在 responsive.css 之后 - .left 具有相同的特异性，这可以解释为什么 background-color 有效（仅存在于响应式中）但 width 无效。
@Newtt 只是补充一下，如果事实证明所有 CSS 都在 responsive.css 中，那么您的答案就在按钮上！ ;)