Question

我正在尝试使用here找到的条件CSS加载技术，但我无法使其工作。代码可以在下面找到（为了清楚起见，我删除了一些部分）这里是实时link。

当屏幕拉伸到650px以上时，媒体查询不适用。这个想法是使用条件加载来防止下载不必要的CSS文件。

<!DOCTYPE html>
<html lang="en">
    <head>

      <link rel="stylesheet" class="mediaquerydependent" 
      data-media="screen and (min-width: 300px)" 
      data-href="styles/stylemin300.css">



      <link rel="stylesheet" class="mediaquerydependent" 
      data-media="screen and (min-width: 650px)" 
      data-href="styles/stylemin650.css">

    <script type="text/javascript" src="js/mediamatch.js">

</head> 
<body>

<h2>HELLO</h2>

</body>
</html>

这是JavaScript：

(function(){
  var queries = document.
                querySelectorAll('.mediaquerydependent'),
      all = queries.length,
      cur = null,
      attr = null;
  while (all--) {
    cur = queries[all];
    if (cur.dataset.media &&
        window.matchMedia(cur.dataset.media).matches) {
      for (attr in cur.dataset) {
        if (attr !== 'media') {
          cur.setAttribute(attr, cur.dataset[attr]);
        }
      }
    }
  }
}());

条件媒体查询加载

0 个答案: