rem單位

rem單位

rem基礎

px是固定單位，不一樣分辨率下效果不同，致使網頁佈局出現誤差。

em是根據父元素來改變字大小

rem是根據根元素html來改變字體大小，只要改變了根元素的font-size就能夠改變全部字體的大小。

1,

html{font-size:20px;}

body{width:6rem;}

此處1rem=20px

2,

html{font-size:62.5%;}

body{width:6rem;}

此處1rem=10px;由於默認1rem=16px;

10/16=62.5%

rem跟隨分辨率而變化的方法

咱們的目的是分辨率不一樣，字體大小也不一樣，即適應屏幕分辨率。那麼怎樣才能夠讓rem的大小隨着分辨率而變化呢？

1，media query，這個不是通用性方法，根據經常使用的分辨率制定rem。

 1    html {font-size : 20px;}
 2     @media only screen and (min-width: 401px){
 3         html {font-size: 25px !important;}
 4     }
 5     @media only screen and (min-width: 428px){
 6         html {font-size: 26.75px !important;}
 7     }
 8     @media only screen and (min-width: 481px){
 9         html {font-size: 30px !important; }
10     }
11     @media only screen and (min-width: 569px){
12         html {font-size: 35px !important; }
13     }
14     @media only screen and (min-width: 641px){
15         html {font-size: 40px !important; }
16     }

2，js方法

 1 <script>
 2 (function (doc, win) {
 3           var docEl = doc.documentElement,
 4             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 5             recalc = function () {
 6               var clientWidth = docEl.clientWidth;
 7               if (!clientWidth) return;
 8              clientWidth=(clientWidth>640)?640:clientWidth;
 9               docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
10             };
11 
12           if (!doc.addEventListener) return;
13           win.addEventListener(resizeEvt, recalc, false);
14           doc.addEventListener('DOMContentLoaded', recalc, false);
15         })(document, window);
16 </script>

其餘佈局方法

1，流式佈局

寬度用百分比；高度用px單位，即高度固定。大分辨率下變形。

固然能夠讓高度值爲rem單位；寬度也要注意兼容性問題。

2，限定寬度

固定的320px，大分辨率下，兩邊留白。不提倡。

3，響應式

不瞭解

道聽途說：直接從web page直接轉換爲web app。對大公司來講工做量大，維護難，中小企業能夠使用，節約成本。

4，設置viewport，縮放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" />

效率高，效果也不錯。