Rem自適應js---flexible.min.js

網上看到不少移動端適配的各類方法，因爲原來工做中對rem的疏忽，因此決定從新學習rem~javascript

因爲移動端特殊性，本文講的是如何使用rem實現自適應，或叫rem響應式佈局，經過使用一個腳本就能夠rem自適應，不用再爲各類設備寬度不一樣而煩惱如何實現自適應的問題。
css

rem是相對於根元素<html>，這樣就意味着，咱們只須要在根元素肯定一個px字號，則能夠來算出元素的寬高。1rem=16px(瀏覽器html的像素，能夠設定這個基準值），假如瀏覽器的html設爲64px，則下面的元素則1rem=64px來運算。html

阿里團隊開源的一個庫。使用flexible.js輕鬆搞定各類不一樣的移動端設備兼容自適應問題。前端

在這裏找到了一個精簡版的flexible.min.js,能夠適配全部的移動端:html5

代碼以下:java

//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);

使用方法：·git

1.複製上面這段代碼到你的頁面的頭部的script標籤的最前面。github

2.根據設計稿大小，調整裏面的最後兩個參數值。web

3.使用1rem=100px轉換你的設計稿的像素，例如設計稿上某個塊是100px*300px,換算成rem則爲1rem*3rem。canvas

上面的代碼，若是在uc瀏覽器下橫屏與豎屏轉換，發現代碼並無自適應，則經過下面進行解決bug:

已經找到兼容方案，可經過js在頁面的head裏生成定義了html元素font-size的style元素來解決！
以下：

<style id="rootFontSize">html{font-size: 100px !important;}</style>
注意還加了important來提升權重

該代碼版本區別於手淘的rem換算方法。使用的是1rem=100px的換算。·

假如你有一個塊是.box{width:120px;height:80px;} 轉爲rem則爲.box{width:1.2rem; height:.8rem;}

基本的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);
}

再次強調一下：·

須要根據你的設計稿的大小來調整腳本最後的兩個參數。

})(750, 750);

第一個參數是設計稿的寬度，通常設計稿有640，或者是750，你能夠根據實際調整
第二個參數則是設置製做稿的最大寬度，超過750，則以750爲最大限制。

【推薦文章】

　　rem與em的介紹：https://www.imooc.com/article/15239

　　rem自適應佈局：http://caibaojian.com/flexible-js.html

　　　　　　　　　　http://caibaojian.com/simple-flexible.html

　 rem實現手淘：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

內容轉自： http://www.javashuo.com/article/p-eimkclzc-u.html

rem自適應js

Rem自適應js---flexible.min.js