Question

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

我的HTML代码和样式元素

＆＃13;

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

＆＃13;

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

＆＃13;

这是我尝试的代码，但除了width我能够更改的每个属性如何更改width属性？

Answer 1

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

将媒体查询样式更改为

#main #blue{
  width: 75%;
}

Answer 2

不要使用内联样式（这是一种不好的做法），这完全取决于特异性，因此您只需设置div（适用于width:100%）或指定#blue甚至更多，通过向其添加父级，在本例中为#main。

您可以计算特异性here

#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 3

启动头标记后添加视口元标记。

<servlet-mapping>
    <servlet-name>library</servlet-name>
    <url-pattern>.*htm</url-pattern> 
  </servlet-mapping>

viewport元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。

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

了解更多http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 4

您的#main div优先于您的#blue div，因为它是在媒体查询之外定义的。如果要将宽度：75％应用于#blue div，请使用max-width，属性为：

#blue {
 max-width: 75%;
}

工作demo

Answer 5

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

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

5 个答案: