iphone - CSS 媒体查询的正确方法

Question

这个问题不是关于什么是 CSS 媒体查询，而是关于它的正确用法是什么。

所以我计划创建一些流畅的页面，当在桌面/平板电脑/移动设备上查看时，这些页面的 UI 会略有不同

所以我的问题是；

1. 对于 1 个页面，我是否应该为桌面/移动/平板电脑创建单独的 CSS 文件，然后使用
调用它们

link href="desktop.css" media="..."
link href="ipad.css" media="..."

或者使用单个/通用 CSS 并在其中包含媒体查询

Common.css

@媒体.... //桌面样式

@媒体.... //ipad样式

我的意思是让单独的 CSS 会产生一些滞后，例如要发出的多个 http 请求......即使是桌面，在较小/压缩的浏览器尺寸下，我可以切换到移动 css..所以让单独的 CSS 会产生一些延迟滞后？

1. 在定义媒体查询时是否有任何顺序需要遵循，从 future 的兼容性 Angular 来看这会有所帮助，例如假设现在，我只想支持台式机和 iPad……但将来，我也想支持 iPhone…… 那么声明媒体查询的正确方式/顺序应该是什么？

只是补充一下，我还没有 100% 决定是只使用宽度还是设备宽度，但你可以假设它们中的任何一个(很可能是设备宽度)并提供你的建议..

谢谢。

Answer 1

1. 使用单个文件，因为它是一个请求，而且可以更有效地压缩。
2. 媒体查询的顺序无关紧要，只要它们不重叠即可。 (它们可以像常规 css 一样运行 - 即，如果您有针对 (min-width: 320px) 和 (min-width: 480px) 的媒体查询 - 而您的屏幕是 1920px - 那么这两个查询都将被处理).

如果您想了解更多关于它们的信息:这里是 Good , Bad和 Ugly边。