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

Posted 2023-03-05

技术标签:

【中文标题】响应式网页设计媒体查询宽度不变【英文标题】：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 属性？

【问题讨论】：

【参考方案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">

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

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

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

【讨论】：

【参考方案5】：

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

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

#main #blue
  width: 75%;

【讨论】：

以上是关于响应式网页设计媒体查询宽度不变的主要内容，如果未能解决你的问题，请参考以下文章