CSS 媒体查询的正确方法

发布于 2024-12-05 02:12:27 字数 718 浏览 1 评论 0原文

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

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

所以我的问题是；

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

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

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

Common.css

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

@media .... //ipad样式

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

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

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

谢谢。

原文

This question is NOT about what CSS Media Queries are, but more on what is the correct usage for it.

So I plan to create some fluid pages which would have slight UI differences when viewed on desktop/tablet/mobile

So my questions are;

For 1 page, should I create separate CSS files for desktop/mobile/tablet and then call them using

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

OR use a single/common CSS and have the media queries within them like

Common.css

@media ....
//desktop styles

@media ....
//ipad styles

I mean will having separate CSS create some lag, boz of multiple http requests to be made..like even for desktop, at smaller/squeezed browser sizes, i can switch to mobile css..So will having separate CSS create some lag?

Is there any order to be followed while defining the media queries, which would help from a future compatibility point of view e.g. let's say for now, I'll just want to support desktop and iPad...But in future,i want to support iPhone as well...
So what should be the correct way/order of declaring the media queries ?

Just to add,I am not yet 100% decided on whether to use just width OR device-width, but you can assume either of them (Most propbably it will be device-width) and provide your suggestions..

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没结果 2024-12-12 02:12:27

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

如果您想了解更多信息：这里有好，不好和丑陋的侧面。