終于可以做點(diǎn)純前端的工作了=。=
之前不用rem的時(shí)候，我遇到了怎樣的問題迷捧？
設(shè)計(jì)師交給我的設(shè)計(jì)圖（暫定尺寸為640x1280，單位為px）里胀葱，標(biāo)定了一些元素的寬度與字體大小漠秋。前端需要按圖紙進(jìn)行還原。非文字類的元素很簡單抵屿，設(shè)置個百分比就搞定庆锦。但文字就有些惡心了。
惡心在那里轧葛？對一個字體大小設(shè)置為16px的段落搂抒，它在iphone5和iphone6p上其實(shí)上同樣大小的，但是屏幕寬度發(fā)生了變化朝群。這也就是說燕耿，總有個屏幕是跟設(shè)計(jì)圖不一樣的。再想想div的高度姜胖，是不是就更覺得蛋疼誉帅。
rem是什么？
<blockquote>
rem（font size of the root element）是指相對于根元素的字體大小的單位右莱。簡單的說它就是一個相對單位蚜锨。看到rem大家一定會想起em單位慢蜓，em（font size of the element）是指相對于父元素的字體大小的單位亚再。它們之間其實(shí)很相似，只不過一個計(jì)算的規(guī)則是依賴根元素一個是依賴父元素計(jì)算晨抡。
</blockquote>
好》招現(xiàn)在我們大概有了一個概念则剃，知道它是怎么回事兒了。html下設(shè)置的font-size就是1rem如捅。通常1rem會是屏幕寬度的1/16棍现。也可以自己設(shè)置。我們可以在css里對元素本身的寬度與字體大小進(jìn)行重新設(shè)置镜遣。來讓你的頁面與設(shè)計(jì)圖保持一致己肮。如果你原來用了px作為單位，那么可能需要進(jìn)行換算悲关。
有沒有好的換算工具谎僻？有，hotcss寓辱。
hotcss基于sass艘绍。十分簡單。
在安裝完成之后讶舰，我的scss如下：
//sass style
//-----------------------------------
@import './px2rem.scss';
$designWidth : 640;
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
html{
width: 100% ;
overflow : hidden ;
}
body {
font-family: $fontStack;
color: $primaryColor;
width:16rem;margin:0 auto;
overflow : hidden ;
}
p{
font-size : px2rem(64);
}
設(shè)計(jì)稿的寬度我們假定為640px鞍盗。在p標(biāo)簽內(nèi)需了，字體在設(shè)計(jì)稿里的大小為64px跳昼。明顯看到我們使用hotcss進(jìn)行了轉(zhuǎn)換。這樣肋乍，在所有的移動端屏幕里鹅颊，每個字的大小都是會屏幕寬度的1/10了。
hotcss的存在可以幫助我們解決其他問題嗎墓造？
屏幕分辨率的不同堪伍，通常會讓促使前端們對像素進(jìn)行充分利用。物理像素們有多少就要用多少觅闽。那么有什么可行的玩弄所有像素的辦法嗎帝雇？簡單的說，如果你的屏幕物理像素點(diǎn)恰好是邏輯像素點(diǎn)的4倍蛉拙，就先把整個頁面布局成原有尺寸的兩倍大小尸闸，然后在meta里設(shè)置viewport再縮小回來：
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
這樣就可以充分利用整塊屏幕的物理像素點(diǎn)。順便可以解決1像素問題孕锄。
