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

Nir*_*eya 5 html css media-queries flexbox responsive-design

我正在通过width根据大小更改 div来使页面具有响应性,但除了宽度之外,我能够更改的每个属性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%;
  }
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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

小智 3

问题是你的#main div风格比你的#blue风格更具体。

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

#main #blue{
  width: 75%;
}
Run Code Online (Sandbox Code Playgroud)