响应式网页设计媒体查询宽度不变

Question

我正在通过根据大小更改 div width来使页面具有响应性，但除了宽度我能够更改的每个属性外， width根本没有变化。

我的 HTML 代码和元素样式

 #main { width: 100%; display: flex; flex-wrap: wrap; } #main div { width: 100%; } @media screen and (max-width: 700px) { #red { display: none; } body { background-color: yellow; } #blue { width: 75%; }

 <body> <div id="main"> <div id="red" style="background-color: red;">RED COLOR</div> <div id="blue" style="background-color: blue;">BLUE COLOR</div> <div id="green" style="background-color: orange;">GREEN color</div> </div>

这是我尝试过的代码，但除了width之外，我可以更改的每个属性如何更改width属性？

Answer 1

不要使用内联样式（这是一个不好的做法），这完全是关于特异性，所以你可以只设置div （对于width:100% ）或指定你的#blue甚至更多，通过向它添加一个父级，在这个案例#main 。

您可以在此处计算特异性

 #main { width: 100%; display: flex; flex-wrap: wrap; } div { width: 100%; } #red { background: red } #blue { background: blue } #green { background: green } @media screen and (max-width: 700px) { #red { display: none; } body { background-color: yellow; } #blue { width: 75%; } }

 <div id="main"> <div id="red">RED COLOR</div> <div id="blue">BLUE COLOR</div> <div id="green">GREEN color</div> </div>

Answer 2

问题是您的#main div样式比您的#blue样式更具体。

将您的媒体查询样式更改为

#main #blue{
  width: 75%;
}

Answer 3

在启动 head 标记后添加视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。

此标签对于网页的响应性很重要。 它根据屏幕大小控制您的网页宽度。

阅读更多http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 4

您的 #main div 优先于您的 #blue div，因为它是在媒体查询之外定义的。 如果你想应用 width: 75% 到只有 #blue div 使用 max-width，属性为：

#blue {
 max-width: 75%;
}

工作演示

Answer 5

我只是遇到了这个问题，没有任何帮助。 我尝试将媒体查询移动到 CSS 文件的末尾，一切正常。