Rem
現(xiàn)如今移動(dòng)端的尺寸大小多種導(dǎo)致也頁(yè)面不能在各種屏幕上適配奕扣，許多網(wǎng)站之前主要采取（1）采用的流式布局：通過(guò)百分比來(lái)定義寬度來(lái)實(shí)現(xiàn)谆沃，但是高度大都是用px來(lái)固定住游盲。
這就導(dǎo)致大屏幕的手機(jī)頁(yè)面上寬度被拉的很長(zhǎng)，高度很短痹兜。
（2）固定寬度做法：早期有些網(wǎng)站把頁(yè)面設(shè)置成320的寬度穆咐，超出部分留白。大屏幕手機(jī)下留白會(huì)特別多，看起來(lái)頁(yè)面會(huì)特別小对湃，操作的按鈕也很小崖叫。
（3）響應(yīng)式做法：這種做法雖然能展現(xiàn)很好的效果，但大型企業(yè)的復(fù)雜性的網(wǎng)站在移動(dòng)端用這種方法去做的話(huà)會(huì)增加工作量拍柒，維護(hù)性難归露。
（4）設(shè)置viewport進(jìn)行縮放：天貓的web app的首頁(yè)就是采用這種方式去做的，以320寬度為基準(zhǔn)斤儿，進(jìn)行縮放剧包，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了往果，這個(gè)方法簡(jiǎn)單粗暴疆液，又高效。但它接下來(lái)要說(shuō)的rem一樣高效……
rem具體是怎么用的
_首先rem是根據(jù)根元素進(jìn)行適配的陕贮，在網(wǎng)頁(yè)中的根元素是html堕油，所以我們可以通過(guò)設(shè)置html的font-size大小來(lái)控制rem的大小
例如：
（1）Html{
Font-size:20px;
}
.btn{
width:6rem;相當(dāng)于=>width:120px(20*6)
height:3rem;相當(dāng)于=>height:60px(20*3)
line-height:3rem;相當(dāng)于=>line-height:60px (20*3)
font-size:1.2rem;相當(dāng)于=>font-size:24px(20*1.2)
border-radius: 0.5rem;相當(dāng)于=>border-radius: 10px(20*0.5)
}
按鈕出來(lái)的效果：
如果我們?cè)俑淖僪tml的font-size的值，看看按鈕發(fā)生上面變化:
（2）Html{
Font-size:40px;
}
看出我們只需要改變html的font-size的px值a肮之；下面元素px大小就等于rem的數(shù)值*a掉缺；
我們只要改變html的font-size大小就可以等比縮放下面元素的大小
怎么計(jì)算出不同分辨率下font-size的值
假設(shè)設(shè)計(jì)師給的是以最左邊藍(lán)色的640px寬度，
頁(yè)面是以640的寬度去切的戈擒，怎么計(jì)算不同寬度下font-site的值眶明，大家看表格上面的數(shù)值變化應(yīng)該能明白。舉個(gè)例子：384/640 = 0.6筐高，384是640的0.6倍搜囱，所以384頁(yè)面寬度下的font-size也等于它的0.6倍，這時(shí)384的font-size就等于12px柑土。在不同設(shè)備的寬度計(jì)算方式以此類(lèi)推蜀肘。
根元素html的font-size如何改變
方法（一）添加css3動(dòng)態(tài)設(shè)置font-size大小
可以根據(jù)js去動(dòng)態(tài)的計(jì)算font-size，這樣的好處是所有設(shè)備分辨率都能兼容稽屏，淘寶首頁(yè)目前就是用js計(jì)算扮宠，但其實(shí)不用JS我們也可以做適配，一般我們?cè)谧鰓eb app都會(huì)先統(tǒng)計(jì)自己網(wǎng)站有哪些主流的屏幕設(shè)備狐榔，然后去針對(duì)那些設(shè)備去做media
query設(shè)置也可以實(shí)現(xiàn)適配坛增，例如下面這樣：
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;
}
}
上面的做的設(shè)置當(dāng)然是不能所有設(shè)備全適配，但是用JS是可以實(shí)現(xiàn)全適配荒叼。方法如下
方法（二）添加js代碼
var docWidth =
640;//640為標(biāo)準(zhǔn)的屏幕
var fontsize = 54;//字體大小
(function?(doc,?win)?{
var?docEl?=?doc.documentElement,
resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize',
recalc?=?function?()?{
var?clientWidth?=?docEl.clientWidth;
if?(!clientWidth)?return;
if?(clientWidth?>=?docWidth?)?{
docEl.style.fontSize?=fontsize?+'px';
}?else?{
docEl.style.fontSize?=?fontsize?*?(clientWidth?/?docWidth?)?+?'px';
}
};
if?(!doc.addEventListener)?return;
win.addEventListener(resizeEvt,?recalc,?false);
doc.addEventListener('DOMContentLoaded',?recalc,?false);
})(document,?window);
假設(shè)以640的寬度為例轿偎，字體大小為54px，自適應(yīng)屏幕的大小rem的插件如上
方法（三）使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配
目前Flexible會(huì)將視覺(jué)稿分成100份（主要為了以后能更好的兼容vh和vw），而每一份被稱(chēng)為一個(gè)單位a。同時(shí)1rem單位被認(rèn)定為10a蔗草。針對(duì)我們這份寬750px的視覺(jué)稿可以計(jì)算出：
1a=7.5px
1rem =75px
那么我們這個(gè)示例的稿子就分成了10a涩馆，也就是整個(gè)寬度為10rem叨咖，對(duì)應(yīng)的font-size為75px：
這樣一來(lái)菲饼，對(duì)于視覺(jué)稿上的元素尺寸換算炫掐，只需要原始的px值除以rem基準(zhǔn)值即可盲镶。例如此例視覺(jué)稿中的圖片仓蛆，其尺寸是176px * 176px,轉(zhuǎn)換成為2.346667rem * 2.346667rem睁冬。
為減少繁瑣的px轉(zhuǎn)換為rem的計(jì)算量，可在sublimeText3添加插件（附件提供的cssrem）
插件具體的安裝方法：
(1)
工具欄中的preference-》Browse packages（點(diǎn)擊進(jìn)去）
將附件中的cssrem文件夾復(fù)制到packages里
重啟sublimeText3
(2)設(shè)置px-rem的轉(zhuǎn)換值
Preference-》packages settings
–》cssrem-》Settings-Default
在Settings-Default中的參數(shù)如下：
其中25的值就是px轉(zhuǎn)換為rem的值（1rem=25px）,可以根據(jù)不同的情況設(shè)置
設(shè)置完成后看疙，當(dāng)在css樣式中輸入時(shí)有以下提示：
