相互覆盖的 CSS 媒体查询

Posted 2023-03-05

【中文标题】相互覆盖的 CSS 媒体查询

【英文标题】：CSS Media Queries Overriding Each other

【发布时间】：2016-02-25 17:18:57

【问题描述】：

感谢 Stack Overflow 的帮助。我有一些自定义 css 用于加强设计。我一直遇到这个问题，如果我在一个媒体查询中更改某些内容，比如 iphone 6，那么该更改会影响另一台设备，比如 iphone 5。它成为这个问题的原因是我一直在调整，看不到尽头。这是我正在使用的@media 断点。

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait)  



/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait)  


/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) 



/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  
      


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 

任何帮助将不胜感激。

【参考方案1】：

我同意 Birdman 的观点，您应该考虑移动优先的方法。然而，移动优先意味着最小的设备尺寸完全在任何媒体查询之外。下一个大小将启动第一个媒体查询。您只需要一个最小宽度，因为这些新样式将添加到基本样式中，而不是覆盖它们。创建的每个媒体查询都将继续与已调用的媒体查询相结合。

而不是担心 iPad 或平板电脑...担心您的设计元素何时开始看起来很糟糕。所有主流浏览器都有足够智能的模拟器来测试不同的设备尺寸。

这是一篇关于利弊的好文章。我总是先编写移动代码，从不担心样式冲突，除非我是故意这样做的 :)

https://codemyviews.com/blog/mobilefirst

【参考方案2】：

当设备宽度落在媒体查询的范围内时，将应用样式。因此，如果设备的宽度为 500 像素，它将首先具有 6plus 样式，然后将被 6 的样式覆盖，然后是 5s'。通常，不建议尝试为特定设备定制 CSS，但如果您愿意，您需要确保没有任何范围重叠，否则它们将被最后出现的样式覆盖。

【讨论】：

谢谢@birdman。如果是这种情况并且我只关心纵向视图，我可以删除 max-device-width 以避免重叠。我知道我已经阅读了我应该关注断点而不是设备的地方，但我还没有成功地做到这一点。再次感谢您的任何见解或建议。

如果您只想使用最小宽度，请确保您按升序排列。从 5s 开始，然后升级到 6plus。这将防止它们被覆盖。