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

【问题标题】：responsive web design media query width not changing响应式网页设计媒体查询宽度不变
【发布时间】：2016-08-04 21:53:18
【问题描述】：

我正在努力使页面具有响应性，方法是根据大小更改 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 属性？

【问题讨论】：

标签： html css responsive-design media-queries flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

#blue {
 max-width: 75%;
}

工作demo

【讨论】：

【解决方案3】：

不要使用内联样式（这是一个不好的做法），这完全是关于特异性，所以你可以只设置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>

【讨论】：

【解决方案4】：

在开始 head 标签之后添加 viewport 元标签。

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

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

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

【讨论】：

【解决方案5】：

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

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

#main #blue{
  width: 75%;
}

【讨论】：