rem单位，10px等于0.1rem，移动端背景自适应 

<!doctype html>
<html data-use-rem><!--需要加的-->
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="applicable-device" content="mobile">
<title>rem单位使用</title>
<script src="https://style.org.hc360.com/js/build/source/core/jquery.min.js"></script>
<script src="https://style.org.hc360.com/js/M-hc/jquery_self.js"></script>
</head>

<body>

<style>
.mbg1{ background:url(../images/t1.jpg) no-repeat center center; width:100vw; height:6.57rem; background-size:cover; overflow:hidden;}
.mbg2{ background:url(../images/t2.jpg) no-repeat center center; width:100vw; height:6.29rem; background-size:cover; overflow:hidden;}
</style>


<div class="mbg1"></div>
<div class="mbg2"></div>





<!--需要加的-->
<script type="text/javascript">

(function (win){
  var doc = win.document;
  var html = doc.documentElement;
  var option = html.getAttribute('data-use-rem');
  if( option === null ) return;
  // defaut 750px；
  var baseWidth = option == 'default' || option == '' || parseInt(option) <= 0 ? 750 : parseInt(option);
  var grids = baseWidth/100,
  resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
  recalc = function() {
    var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-width
    html.style.fontSize = clientWidth / grids + 'px';
  };
  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
  recalc();
})(window);


</script>

</body>
</html>

 

posted @ 2020-07-06 11:30  南瓜小园  阅读(528)  评论(0)  编辑  收藏  举报