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

时间:2014-12-13 19:10:31

标签: css css3 browser responsive-design media-queries

我正在阅读Scott Jehl的神奇着作“Responsible Responsive Design”。他写了关于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>

1 个答案:

答案 0 :(得分:1)

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

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

然而,请注意:经常交易网络往返以降低文件大小并不是一个好的决定。这篇文章讨论了eCSSential等解决方案的局限性:Debunking Responsive CSS Performance Myths