我正在阅读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性能神话