聲明：學(xué)習(xí)和引用的原網(wǎng)址http://caibaojian.com/web-app-rem.html
一、什么是rem？
rem（font size of the root element）是一個(gè)相對(duì)于根元素<html>的字體單位。與px像素不同，它是一個(gè)相對(duì)單位，而rem是相對(duì)于根元素html，em則是相對(duì)于父元素。
二、為什么web app要使用rem？
1、實(shí)現(xiàn)強(qiáng)大的屏幕適配布局，能等比例適配所有屏幕：
2、沒(méi)有屏幕字體縮放問(wèn)題：
3、沒(méi)有em多次使用計(jì)算麻煩的問(wèn)題：
三、計(jì)算出不同分辨率下font-size的值的方法
1.媒體查詢@media
關(guān)于媒體查詢@media(css3):
使用 @media 查詢，你可以針對(duì)不同的媒體類(lèi)型定義不同的樣式。
@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。
適用場(chǎng)景：改變不多的業(yè)務(wù)。
優(yōu)點(diǎn)：只需要在做web app先統(tǒng)計(jì)自己網(wǎng)站有哪些主流的屏幕設(shè)備，然后去針對(duì)那些設(shè)備去做media query設(shè)置，就能實(shí)現(xiàn)適配。
缺點(diǎn)：不能所有設(shè)備全適配。
核心代碼示例：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
2.js
有好幾個(gè)比較熱門(mén)的庫(kù)可以幫助我們解決移動(dòng)端自適應(yīng)可伸縮布局的問(wèn)題。
⑴.阿里團(tuán)隊(duì)開(kāi)源的一個(gè)庫(kù)： lib-flexible
使用方法也簡(jiǎn)單：
1.引入官方庫(kù)（在所有資源加載之前執(zhí)行這個(gè)JS。執(zhí)行這個(gè)JS后，會(huì)在<html>元素上增加一個(gè)data-dpr屬性，以及一個(gè)font-size樣式。JS會(huì)根據(jù)不同的設(shè)備添加不同的data-dpr值，比如說(shuō)2或者3，同時(shí)會(huì)給html加上對(duì)應(yīng)的font-size的值，比如說(shuō)75px。）
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2.還需要編寫(xiě)js函數(shù)或者scss語(yǔ)法來(lái)配合動(dòng)態(tài)的修改dpr，樣式就可以用rem了
⑵.viewport
使用方法：
1.在<header></header>中引入
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.編寫(xiě)js函數(shù)來(lái)動(dòng)態(tài)處理html的font-size，這個(gè)的代碼大家可以去網(wǎng)上搜。
// 設(shè)置頁(yè)面rem大小
// 以設(shè)計(jì)圖( 750*1334 )尺寸寬度作為參考標(biāo)準(zhǔn)
;
(function (doc, win) {
var max = 750,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= max) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * clientWidth / max + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
我兩個(gè)都嘗試了，感覺(jué)flexible好像是真的沒(méi)有viewport好用啊，可能是因?yàn)槲也粫?huì)計(jì)算dpr吧！
