在一个 css 文件中为所有 @media 定义 css 是否更好?

发布于 2024-08-22 18:46:02 字数 350 浏览 4 评论 0原文

正如本文建议

http://www.456bereastreet.com/archive/201002/css_efficiency_tip_use_a_single_stylesheet_file_for_multiple_媒体/< /a>

或者不同媒体的不同外部 CSS 会是更好的选择?

在可维护性、站点性能方面。

As this article suggesting

http://www.456bereastreet.com/archive/201002/css_efficiency_tip_use_a_single_stylesheet_file_for_multiple_media/

or different external CSS for different media would be better option?

in terms of maintainability, site performance.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

寻找我们的幸福 2024-08-29 18:46:02

基本上,如果您可以基于媒体以编程方式将 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.

荭秂 2024-08-29 18:46:02

组合样式表优点:

  • 最佳/快速
  • 压缩后尺寸明显减小
  • ,并且 http 请求更少

组合样式表缺点:

  • 混乱;所有不同的样式表都集中在一个地方
  • 难以维护
  • 可读性较差

Combined Style Sheet Pros:

  • Optimal/Fast
  • Good reduction in size after compression
  • and yes fewer http requests

Combined Style Sheet Cons:

  • Messed up; all different style sheets in one place
  • Difficult to maintain
  • Less readable
春花秋月 2024-08-29 18:46:02

您可以像这样使用依赖于媒体的 @import 规则:

@import url("print.css") print;
@import url("projection.css") projection, tv;

它应该适用于除 IE5-7 之外的所有版本(根据: http://www.westciv.com/wiki/CSS_Guide:_Media#mediaspecific
我无法测试 IE8,所以你可能也会感到失望。

这会导致初始 CSS 加载非常小,然后根据媒体只上传所需的样式表。

You could use media-dependent @import rules like so:

@import url("print.css") print;
@import url("projection.css") projection, tv;

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文