Question

我正在为网站开发样式，并使用媒体查询作为断点。在断点处，页面突然决定从第一个间隔开始监听某种样式，从第二个间隔开始监听某种样式。请帮忙。

我尝试更改视口的值，但这不起作用。我希望这个问题对于比我有更多经验的人来说是显而易见的，因为我真的不知道该怎么办。

@media (min-width: 500px) and (max-width: 768px) { 

     (ex.) #randomDiv {
     background-color: blue;
     width: 100px;  
     }
}

@media (min-width: 768px) and (max-width: 1023px) {

     (ex.) #randomDiv {
     background-color: red; 
     width: 300px; 
     }

}

当视口达到768像素时，它决定混合样式，例如背景颜色变为红色，但宽度不变。有人知道我在做什么错吗？在768px（769px <）之后，一切都很好，与768px之前一样。请帮忙。

Answer 1

在使用媒体查询使前端代码响应时，考虑基本样式或开始样式，然后使用查询仅在一个方向上更改这些样式，这是非常有用的。我的意思是不是在查询中使用max-width 和 min-width，而是从非查询样式开始，然后使用min-width 覆盖这些规则或 max-width，但不能两者都选。这样，更改是无缝的，您只需要考虑确切的断点位置以及要覆盖的样式。

在使用这种方法时，样式表中媒体查询的顺序也很重要。请注意，如果我使用的是min-width，那么最宽泛的查询将首先出现在这里。

尝试在“整页”模式下查看，然后将屏幕尺寸从全角向下更改。

#randomDiv {
  color: white;
  margin: 0 auto;
  padding: 20px;

  /* only background-color & width will change */
  background-color: purple; 
  width: 90%;
}
@media (max-width: 1023px) {
  #randomDiv {
     background-color: red; 
     width: 300px; 
  }
}
@media (max-width: 768px) { 
  #randomDiv {
     background-color: blue;
     width: 100px;  
  }
}

<div id="randomDiv">I am so random.</div>

断点处的样式“拆分”，媒体查询

1 个答案: