二、em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。javascript
em是指字體高度 瀏覽器默認1em=16px,因此0.75em=12px;咱們常常會在頁面上看到根元素寫的font-size:62.5%; 這樣em就成了16px*62.5=10em;這是顯示在頁面的字體大小是10px; 這樣12px=1.2em,10px=1em,也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了,
em的特色 em是個相對值 他會根據父級元素的大小而變化 可是若是嵌套了多個元素 要計算它的大小,是件很頭疼的事情
這樣的狀況下,就出現了rem rem的區別在於它是相對於根基元素的,所以不會被它的父類影響到css
結論：之因此前端行業作移動端會廣泛默認用rem或em,是由於能夠經過js控制根元素(或者用@media)來達到適配各類分辨率的字體大小的效果html
三、rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的前端
rem在移動端應用可參考淘寶的頁面http://m.taobao.com (html的font-size經過動態計算獲取)java
方案一：簡單經常使用版本 （淘寶使用的：https://github.com/amfe/lib-flexible）android
頁面基準750px;html font-size值的計算：ios
(function(doc,win){var htmlFont=function(){var docEl=doc.documentElement,l=docEl.clientWidth,f;f=l/7.5;l>750?docEl.style.fontSize=100+"px":docEl.style.fontSize=f+"px"};htmlFont();win.addEventListener("resize",htmlFont,false)})(document,window);
注：把這段 原生JS 放到 HTML 的 head 標籤中便可(需設置meta縮放比1:1）css3
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />git
----------分割線----------github
方案二：rem 進階版--高清方案
和上面一下仍是把這段 原生JS 放到 HTML 的 head 標籤中便可（注:不要手動設置viewport，該方案自動幫你設置，經過修改viewport 屬性放大縮小 initial-scale）
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);
代碼原理：
這是阿里團隊的高清方案佈局代碼，所謂高清方案就是根據設備屏幕的DPR（設備像素比，又稱DPPX，好比dpr=2時，表示1個CSS像素由4個物理像素點組成） 動態設置 html 的font-size, 同時根據設備DPR調整頁面的縮放值，進而達到高清效果。
代碼優點：
- 引用簡單，佈局簡便
- 根據設備屏幕的DPR,自動設置最合適的高清縮放。
- 保證了不一樣設備下視覺體驗的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
- 有效解決移動端真實1px問題（這裏的1px 是設備屏幕上的物理像素）
總結：
1)兩個方案默認 1rem = 100px，因此你佈局的時候，徹底能夠按照設計師給你的效果圖寫各類尺寸啦。
2)毫不是每一個地方都要用rem，rem只適用於固定尺寸！
3)好比你在效果圖上量取的某個按鈕元素長 86px, 寬27px ，那你直接能夠這樣寫樣式：
|
1
|
.div
1
{
width
:.
85
rem;
height
:.
27
rem;}
|
高清方案問題總結詳看: https://github.com/ant-design/ant-design-mobile/issues/732
高清方案問題和參考: https://zhuanlan.zhihu.com/p/25552482
----------分割線----------
關於方法二要修改頁面根font-size；和viewport的比例，引出一種簡單粗暴的頁面適配，就是將設計稿按照PC的正常切圖的方法輸出後直接修改viewport的縮放比例達到想要的結果；縮放代碼以下：mate viewport標籤，用JS追加
var head=document.getElementsByTagName('head')[0],scalevalue=screen.width/750,metaTag=document.createElement('meta');metaTag.setAttribute('name','viewport');metaTag.setAttribute('content','width='+scalevalue+',initial-scale='+scalevalue+',maximum-scale='+scalevalue+',user-scalable=no');head.appendChild(metaTag);
tips：和上面類似的適配，也能夠利用css3 transform 的scale 值來實現,只是須要在放大（旋轉）元素的基點位置上（transform-origin）作一下處理，下面用vw適配控制頁面大小的方法中有用到，原理很簡單；
四、vw、vh、vmin、vmax 主要用於頁面視口大小布局，相對於rem;v*在頁面佈局上更加方便簡單 （flexiable官方文檔中推薦使用的（flexiable能夠廢棄了）：https://github.com/evrone/postcss-px-to-viewport）
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
vw邏輯很是清晰，"1vw ＝ 1/100th viewport width"，用viewport width的百分比來設置element width。
vw被支持的太晚是其並不流行的根本緣由，而當時移動端web app/page的開發需求已經十分旺盛，彈性佈局是一種不錯的移動端界面兼容展示方式，對於rem機遇就此而來，便成爲一個實現彈性佈局效果的極佳方案。
其實看目前情況，對vw最不利的是Android Browser，ndroid Browser 4.4如下的用戶是不兼容的，目前新版x5更新後，安卓版微信的vw vh vmin vmax 已經沒有兼容性問題了，那麼隨着時間推移，相信將來vw將會流行。
頁面是基於瀏覽器窗口大小自動適配的若是感受頁面太大；可添加下面JS經過縮放控制頁面的最大尺寸
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<
script
type="text/javascript">
(function(doc,win){
var htmlScale = function(){
console.log('2');
oBdoy = doc.getElementsByTagName('html')[0];
var domWidht = doc.documentElement.clientWidth;
var myScale = 750/domWidht;
if(domWidht){
oBdoy.style.transform = 'scale('+myScale+')';
oBdoy.style.transformOrigin = '50% '+0+'%';
}else{
oBdoy.removeAttribute('style','transform');
oBdoy.removeAttribute('style','transformOrigin');
}
};
htmlScale();
win.addEventListener('resize',htmlScale,false);
})(document,window);
</
script
>
|
五、其它的單位還有：
%:百分比
in:寸
cm:釐米
mm:毫米
pt:point，大約1/72寸
pc:pica，大約6pt，1/6寸
ex：取當前做用效果的字體的x的高度，在沒法肯定x高度的狀況下以0.5em計算(IE11及如下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加麼有前綴)
ch:以節點所使用字體中的「0」字符爲基準，找不到時爲0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
實際應用中：建議綜合 固定寬度、字體大小可用rem、px；其餘可結合vw %