移动端rem，10px等于0.1rem 

<!doctype html>
<html data-use-rem>
<head>
<meta charset="gb2312">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">

<title>标题</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="说明" />
<link href="css/style.css" rel="stylesheet" type="text/css">

<script src="js/jquery-1.10.2.min.js"></script>
<script src="https://style.org.hc360.com/js/M-hc/jquery_self.js"></script>
<script src="js/jquery_self.js"></script>
<script src="js/jsxg.js"></script>
</head>

<body>

<div class="box1">

    <ul>
        <li>
            <div class="lidiv"></div>
        </li>
         <li>
            <div class="lidiv"></div>
        </li>
    </ul>

</div>



<br/>

</body>
</html>

 

$(document).ready(function(){
		
	
	(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);

		
	
});

 

posted @ 2020-11-18 18:01  南瓜小园  阅读(313)  评论(0)    收藏  举报