为独立屏幕加载独立的媒体查询 - 浏览器支持



我正在阅读Scott Jehl的《负责任的响应式设计》一书。他写了关于CSS交付方法和来自服务器的请求的文章。我想知道是否所有浏览器都支持以下功能(在示例中),以便仅为特定设备加载必要的媒体查询,而无需请求所有其他媒体查询文件。

HTML 示例:

  <head>
  <link href="shared.css">
  <link href="screen480.css" media="(min-width: 480px)">
  <link href="screen980.css" media="(min-width: 980px)">
  <link href="screen1200.css" media="(min-width: 1200px)">
  </head>

大多数主流浏览器都会加载所有 css 文件,而不考虑媒体查询。

如果您希望根据媒体查询动态加载css文件,请查看Scott的eCSSential。

但是,请注意:通常,为了较小的文件大小而交易网络往返不是一个好决定。这是一篇很棒的文章,讨论了eCSSential等解决方案的局限性:揭穿响应式CSS性能神话

最新更新