html - CSS 媒体查询相互覆盖

Question

感谢 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) {

}

如有任何帮助，我们将不胜感激。

Answer 1

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

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

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

https://codemyviews.com/blog/mobilefirst