在一个 css 文件中为所有 @media 定义 css 是否更好?
正如本文建议
或者不同媒体的不同外部 CSS 会是更好的选择?
在可维护性、站点性能方面。
As this article suggesting
or different external CSS for different media would be better option?
in terms of maintainability, site performance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
基本上,如果您可以基于媒体以编程方式将 CSS 文件添加到客户端(只要您最后只发送一个 css 文件),那么可以,基于 @media 构建多个 CSS 文件。
如果您无法以编程方式添加 css,那么我建议将它们合并到一个 css 文件中(因为无论如何您都必须将它们全部发送到客户端),从而减少客户端的 http 请求数量。
更少的 http 请求 = 更快的页面加载。
Basically, if you can programmatically add CSS files to your client based on the media (as long as you only send ONE css file in the end), then yes, build multiple CSS files based on the @media.
If you cannot add css programmatically, then I would suggest combining them into a single css file (since you have to send them all to the client regardless), thus reducing the number of http requests by the client.
fewer http requests = faster page loads.
组合样式表优点:
组合样式表缺点:
Combined Style Sheet Pros:
Combined Style Sheet Cons:
您可以像这样使用依赖于媒体的 @import 规则:
它应该适用于除 IE5-7 之外的所有版本(根据: http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific)
我无法测试 IE8,所以你可能也会感到失望。
这会导致初始 CSS 加载非常小,然后根据媒体只上传所需的样式表。
You could use media-dependent @import rules like so:
it should work in everything but IE5-7 (as per: http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific )
I can't test for IE8 so you might be disappointed there too.
it would result in a very small initial CSS load, then upload just the needed stylesheets based on media.