移动端布局——rem的使用

终于可以做点纯前端的工作了=。=
之前不用rem的时候，我遇到了怎样的问题？
设计师交给我的设计图（暂定尺寸为640x1280，单位为px）里，标定了一些元素的宽度与字体大小。前端需要按图纸进行还原。非文字类的元素很简单，设置个百分比就搞定。但文字就有些恶心了。
恶心在那里？对一个字体大小设置为16px的段落，它在iphone5和iphone6p上其实上同样大小的，但是屏幕宽度发生了变化。这也就是说，总有个屏幕是跟设计图不一样的。再想想div的高度，是不是就更觉得蛋疼。

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

好。现在我们大概有了一个概念，知道它是怎么回事儿了。html下设置的font-size就是1rem。通常1rem会是屏幕宽度的1/16。也可以自己设置。我们可以在css里对元素本身的宽度与字体大小进行重新设置。来让你的页面与设计图保持一致。如果你原来用了px作为单位，那么可能需要进行换算。

有没有好的换算工具？有，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);
}

设计稿的宽度我们假定为640px。在p标签内，字体在设计稿里的大小为64px。明显看到我们使用hotcss进行了转换。这样，在所有的移动端屏幕里，每个字的大小都是会屏幕宽度的1/10了。

hotcss的存在可以帮助我们解决其他问题吗？
屏幕分辨率的不同，通常会让促使前端们对像素进行充分利用。物理像素们有多少就要用多少。那么有什么可行的玩弄所有像素的办法吗？简单的说，如果你的屏幕物理像素点恰好是逻辑像素点的4倍，就先把整个页面布局成原有尺寸的两倍大小，然后在meta里设置viewport再缩小回来：

这样就可以充分利用整块屏幕的物理像素点。顺便可以解决1像素问题。