css - 断点处的样式 "splitting"，媒体查询

Question

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

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

@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; 
     }

}

当视口(viewport)达到 768px 时，它决定混合样式，p.e.背景颜色变为红色，但宽度不变。有谁知道我做错了什么？在 768px (769px <) 之后一切正常，768px 之前也是如此。请帮忙。

Answer 1

当使用媒体查询使你的前端代码响应时，考虑基本或起始样式然后使用查询仅在一个方向上改变这些样式是非常有用的。我的意思是，不要在查询中使用 max-width 和 min-width，而是从非查询样式开始，然后覆盖这些规则使用 min-width OR 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>