Rem自適應js之精簡版flexible.js
阿新 • • 發佈：2018-12-23
//designWidth:設計稿的實際寬度值，需要根據實際設定 //maxWidth:製作稿的最大寬度值，需要根據實際設定 //這段js的最後面有兩個引數記得要設定，一個為設計稿實際寬度，一個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為(750,750) ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; 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); } })(750, 750);
原文連結：http://caibaojian.com/simple-flexible.html
使用方法：·
1.複製上面這段程式碼到你的頁面的頭部的script標籤的最前面。
2.根據設計稿大小，調整裡面的最後兩個引數值。
3.使用1rem=100px轉換你的設計稿的畫素，例如設計稿上某個塊是100px*300px,換算成rem則為1rem*3rem。
也可以到我的Github上下載這個專案裡的壓縮程式碼flexible.min.js
Star:https://github.com/kujian/simple-flexible/ Follow Me
該程式碼版本區別於手淘的rem換算方法。使用的是1rem=100px的換算。
假如你有一個塊是.box{width:120px;height:80px;} 轉為rem則為.box{width:1.2rem; height:.8rem;}
原文連結：http://caibaojian.com/simple-flexible.html
基本的HTML模板
你也可以直接複製下面這個基礎的HTML模板。·
<!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>前端開發部落格</title> <link rel="stylesheet" href="base.css"> <script type="text/javascript"> //引入該flexible.min.js !function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750); </script> </head> <body> <!-- 正文 --> </body> </html>
base.css
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);
}再次強調一下：
需要根據你的設計稿的大小來調整指令碼最後的兩個引數。
- 第一個引數是設計稿的寬度，一般設計稿有640，或者是750，你可以根據實際調整
- 第二個引數則是設定製作稿的最大寬度，超過750，則以750為最大限制。
原文連結：http://caibaojian.com/simple-flexible.html