Javascript 条件媒体查询加载_Javascript_Html_Css_Media Queries

Javascript 条件媒体查询加载

javascript html css

Javascript 条件媒体查询加载,javascript,html,css,media-queries,Javascript,Html,Css,Media Queries,我正在尝试使用找到的条件CSS加载技术，但我无法让它工作。代码可以在下面找到（为了清晰起见，我去掉了一些部分），这里是live 当屏幕拉伸到650px以上时，媒体查询不适用。其思想是使用条件加载来防止下载不必要的CSS文件 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" class="mediaquerydependent" data-med

我正在尝试使用找到的条件CSS加载技术，但我无法让它工作。代码可以在下面找到（为了清晰起见，我去掉了一些部分），这里是live

当屏幕拉伸到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>

您的代码只运行一次。如果要处理浏览器大小调整，则需要在

resize

事件中绑定该代码

(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]);
        }
      }
    }
  }
}());