CSS媒体查询的正确方法

Question

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

所以我打算创建一些流畅的页面，当在桌面/平板电脑/手机上查看时会有轻微的UI差异

所以我的问题是;

1. 对于1页，我应该为桌面/手机/平板电脑创建单独的CSS文件，然后使用
进行调用

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

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

Common.css

@media .... //桌面样式

@media .... // ipad样式

我的意思是将有单独的CSS创建一些滞后，多个http请求的boz即使对于桌面，在较小/挤压的浏览器大小，我可以切换到移动css ..所以将有单独的CSS创建一些滞后？

1. 在定义媒体查询时是否有任何顺序要遵循，这将有助于从未来的兼容性观点，例如让我们说现在，我只想支持台式机和iPad ......但是在未来，我也想支持iPhone ...... 那么宣布媒体查询的正确方法/顺序应该是什么？

添加，我还没有100％决定是否只使用宽度OR设备宽度，但你可以假设其中任何一个（最可能是设备宽度）并提供你的建议..

谢谢。

Answer 1

1. 使用单个文件，因为它的一个请求因为可以更有效地进行gzip压缩。
2. 媒体查询的顺序无关紧要，如果它们不重叠。 （他们可以像普通的css一样进行operlap - 即，如果你有（min-width：320px）和（min-width：480px）的媒体查询 - 并且你的屏幕是1920px - 那么两个查询都将被处理< / em>的）。

如果您想了解更多相关信息：这里有Good，Bad和Ugly方。