移動端適配的小知識點！

基本概念

平時咱們寫頁面的時候寫的 css 單位通常都會是px 爲單位也就是像素單位，也就是一個相對長度的單位，而像素也就是相對於顯示器屏幕的分辨率而定的。那麼除了一個px單位之外還有em以及 rem,在咱們國內來講用得最多固然是px單位，而在國外的網站字體用的大都em 和 rem 的單位，因此國外大部分的網站能夠調整！

那什麼是em和rem呢？

0一、 em

em呢也是相對長度單位，可是它是相對於當前的對象文本內的字體的大小而言的，要是你在使用em的時，當前對象的文本未設置字體的大小也就是font-size這個樣式的時候那麼em的大小將會以瀏覽器的字體默認大小（16px）爲相對單位，可是爲了方便計算通常會在body中設置font-size:62.5%，具體用法請自行查看相關文章

沒設置字體大小的狀況下：

上面能夠看出來， height:1em在瀏覽器 1em實際的像素就是 16px而已，也就是咱們上面說的沒設置字體的大小的狀況下 em單位將會以默認（ 16px）而相對。

設置字體大小的狀況下：

注意看一下咱們設置的 font-size!設置字體大小號咱們的 em單位立刻就是以它爲相對的對象了！

0二、rem

rem是咱們重點介紹的對象，那麼又什麼是rem呢，rem是css3新增的一個單位，那麼它和em又有什麼樣的區別呢，區別是rem則是隻相對於HTML跟元素爲相對單位，那麼修改總體字體的大小隻須要直接在HTML的跟元素上直接相關它相對的單位就能夠完美的解決這個需求，同時也能夠避免修改之後出現一系列未知的bug，並且如今對於rem來講兼容性也比較好，固然除了IE8以及更早的版本覺得兼容不是很好，可是也能夠直接多寫一個絕對單位進行聲明就OK，

看一下最基本的用法：

咱們是設置 HTML根元素的 font-size:37.5px做爲相對的單位，那麼怎麼計算呢，也就是 1rem就等於 37.5個像素！

pc和移動端的適配

就目前來講許多主流的網站不只僅是在pc端上完美展現，移動端也一樣擁有很是完美的界面，幾乎全部的網站都把移動端做爲重中之重，再也不只是只在pc端展現優美的界面，而是把移動端做爲同等比重去適配移動端，移動端的適配有新的一套專門的UI設計稿，也可能只是簡單的適配原來的pc端的界面，界面未發生大的變化只是適配了移動端的顯示，網上適配移動端的方案百花綻開。

經過上面的預熱知識，大致也懂得了rem這個單位的用法計算，若是看上面的介紹還沒明白能夠繼續參考相關文章瞭解清楚。

那麼咱們直接上手flexible.js阿里的移動端適配解決方案！

附上:

官網文檔地址：github.com/amfe/articl…

GitHub地址：github.com/amfe/lib-fl…

demo圖：

實現這一簡單的效果對於咱們來講簡直是so easy,這個demo可以實現對各個主流的移動端瀏覽器不論是微信內置瀏覽器仍是它都完美適配展現咱們想要的效果，可是歸功於flexible.js

實現移動端適配方案：

一、先用內聯的方式引入cdn地址（優先加載flexible.js）

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
複製代碼

未引入flexible.js的以前：

引入flexible.js以後：

引入之後咱們會發現它自動的爲咱們添加了一個 font-size="37.5px;"那麼這個 37.5px是怎麼計算的呢? 假設咱們的設計稿爲： 750px而 flexible.js會將視覺稿分爲 100份，而每一份爲一個單位，假設爲 m個單位那麼

1m = 7.5px
1rem = 10m 
1rem = 75px

複製代碼

假若有一個尺寸爲300*300像素換算成rem 則是：4rem * 4rem

設計稿爲750px寬，那麼整個屏幕也就是十份,對應的font-size: 75px，並且咱們的flexible.js都會根據屏幕幫咱們自動計算好font-size的大小，就像咱們剛剛截圖的地方是font-size:37.5px,它是有flexible.js動態計算出來的！flexible.js的實質也就是：動態改變meta標籤。

看看它的源碼：

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

複製代碼

在官網文檔中也說明了咱們不用手動設置dpr這個屬性，由於Flexible在Android系列的手機始終都會默認爲1，而ios則會進行動態判斷！

Flexible簡直很是方便有木有：

完成引入 Flexible之後基本咱們整個移動端的適配已經完成了一半了，如今就能夠一梭子的寫樣式了，簡直完美啊！

文字處理

在Flexible中對於文字是不建議使用rem的!具體緣由查看官方文檔！那麼咱們不用rem,那麼又用什麼做爲咱們適配的單位呢，那固然是px啦，可是咱們仍是要做適配的，官網文檔的方案是經過[data-dpr]屬性來區分不一樣dpr下的文本字號大小。

div {
    width: 2rem; 
    height: 1rem;
    font-size: 12px; // 默認dpr爲1的fontSize
}
//data-dpr爲2的狀況下：
[data-dpr="2"] div {
    font-size: 24px;
}

//data-dpr爲3的狀況下：
[data-dpr="3"] div {
    font-size: 36px;
}

複製代碼

固然還有其餘的更優的方法，這只是其中的一種而已也就是官網介紹的一種！

總結

我第一次進行移動端適配的時候是寫2套樣式的（我的不太建議），有的複雜地方還可能須要寫新的移動端佈局，由於移動端和pc是倆套設計稿，並非直接對pc端進行適配，直接適配一套設計稿就不用寫新的佈局等，甚至更快更好，可是需求大於一切，當時使用的就是meida queries（媒體查詢）經過查詢設備寬度來執行不一樣css的代碼，缺點就是代碼量比較大，維護不方便！因此仍是直接使用rem方式最好，固然還有其餘的方式，看本身我的需求！

由於咱們引入的flexible.js的是http開頭的，若是本身的項目是https的會出現加載不了的狀況，會出現頁面佈局錯亂的現象，此時此刻，別慌！咱們能夠將flexible.js的源碼直接丟到咱們新建的js中，直接本地引入就行了，很是方便！