rem單位是在移動(dòng)端布局中最常使用的單位
通常做法是設(shè)置html{font-size:62.5%},然后使用媒體查詢?nèi)ジ淖儾煌叽缭O(shè)備的font-size值。
這樣做的不足之處:每個(gè)文件都需要引用一大串的font-size值很繁瑣,另外值并不能達(dá)到連續(xù)變化的效果。
這個(gè)時(shí)候可以引入一段js,通過識(shí)別設(shè)備尺寸來動(dòng)態(tài)改變font-size值
var currClientWidth,fontValue,originWidth;
//originWidth用來設(shè)置設(shè)計(jì)稿原型的屏幕寬度(這里是以 Iphone 6為原型的設(shè)計(jì)稿)
originWidth=375;
__resize();
//注冊(cè) resize事件
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
//這里是設(shè)置屏幕的最大和最小值時(shí)候給一個(gè)默認(rèn)值
if (currClientWidth>640){currClientWidth = 640};
if (currClientWidth<320){currClientWidth = 320};
fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}