動态設定rem的相對值

在運用rem時，想要在頁面變化時達到自适應的效果，那麼rem的相對值，也就是body或者html的字型大小要成比率進行變化，可以用以下方法：

(function () {

resize();

// 動态設定font-size大小z

function resize() {

var wH = window.innerHeight; // 目前視窗的高度

var wW = window.innerWidth; // 目前視窗的寬度

var whdef = 16 / 1920;// 表示1920的設計圖,使用16PX的預設值

var html = document.documentElement;

if(wW>1200){

var rem = wW * whdef; // 以預設比例值乘以目前視窗寬度,得到該寬度下的相應FONT-SIZE

html.style.fontSize = rem + “px”; //适用于PC網站

}else{

var rem = 1200 * whdef;

html.style.fontSize = rem + “px”;

}

}

// 監聽視窗大小改變事件

window.onresize = resize;

})();

提供一個将px轉化為rem的平台：http://www.ofmonkey.com/front/rem

如果覺得将px轉化為rem比較麻煩，還可以用另一種方式：

(function () {

resize();

// 動态設定font-size大小z

function resize() {

var wH = window.innerHeight; // 目前視窗的高度

var wW = window.innerWidth; // 目前視窗的寬度

var whdef = 100 / 1920;// 表示1920的設計圖,使用16PX的預設值

var html = document.documentElement;

if(wW>1200){

var rem = wW * whdef; // 以預設比例值乘以目前視窗寬度,得到該寬度下的相應FONT-SIZE

html.style.fontSize = rem + “px”; //适用于PC網站

}else{

var rem = 1200 * whdef;

html.style.fontSize = rem + “px”;

}

}

// 監聽視窗大小改變事件

window.onresize = resize;

})();

将 var whdef = 100 / 1920 設定為100px的相對值，

那麼在轉化時，如div為20px

那麼設定為rem為：0.2rem

這樣一來 就不需要再去轉化那麼麻煩了