2020-10-21

最新推荐文章于 2020-11-18 11:07:10 发布

lgd1917

最新推荐文章于 2020-11-18 11:07:10 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/lgd1917/article/details/109206996

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>rem自适应JS/精简版flexble.js</title>
<style>
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5; font-size:14px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top; height:auto;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
input:focus{outline:none;}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
body{background:#fff;}
input::-webkit-input-speech-button {display: none}
button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>

   function refreshRem() {
       var width = docEl.getBoundingClientRect().width;
       maxWidth = maxWidth || 540;
       width>maxWidth && (width=maxWidth);
       var rem = width * 100 / designWidth;
       remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
   }

   if (docEl.firstElementChild) {
       docEl.firstElementChild.appendChild(remStyle);
   } else {
       var wrap = doc.createElement("div");
       wrap.appendChild(remStyle);
       doc.write(wrap.innerHTML);
       wrap = null;
   }
   //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
   refreshRem();

   win.addEventListener("resize", function() {
       clearTimeout(tid); //防止执行两次
       tid = setTimeout(refreshRem, 300);
   }, false);

   win.addEventListener("pageshow", function(e) {
       if (e.persisted) { // 浏览器后退的时候重新计算
           clearTimeout(tid);
           tid = setTimeout(refreshRem, 300);
       }
   }, false);

   if (doc.readyState === "complete") {
       doc.body.style.fontSize = "16px";
   } else {
       doc.addEventListener("DOMContentLoaded", function(e) {
           doc.body.style.fontSize = "16px";
       }, false);
   }
})(720, 720);

</script>
</head>
<style>
html,body{ height:100%; width:100%;}
.box{ height:1rem; width:1rem; background:#e5e5e5; margin:0rem auto;}
</style>
<body>
<div class="box"></div>
</body>
</html>