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