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. 在定义媒体查询时是否需要遵循任何顺序，这将有助于从未来的兼容性角度，例如假设现在，我只想支持台式机和iPad……但将来，我也想支持iPhone…… 那么声明媒体查询的正确方式/顺序应该是什么？

补充一下，我还没有 100% 决定是仅使用宽度还是设备宽度，但您可以假设其中任何一个（很可能是设备宽度）并提供您的建议..

谢谢。

Answer 1

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

如果您想了解更多关于它们的信息：这里有Good、Bad 和Ugly 边。