感谢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) {
}
任何帮助将不胜感激。
最佳答案
我同意Birdman的观点，您应该考虑采用移动优先的方法。但是，“移动优先”意味着最小的设备尺寸完全在任何媒体查询之外。下一个尺寸增加将启动第一个媒体查询。您只需要最小宽度，因为这些新样式将是基本样式的补充，而不是覆盖它们。创建的每个媒体查询将继续与已经调用的媒体查询合并。
不用担心iPad或平板电脑……担心什么时候您的设计元素就会变得糟透了。所有主要的浏览器都具有足够智能的仿真器，可以在不同的设备尺寸下进行测试。
这是一篇关于利弊的好文章。我总是先编写移动设备代码，从不担心样式冲突，除非我故意这样做:)
https://codemyviews.com/blog/mobilefirst
关于html - 相互覆盖的CSS媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33873790/