移动端布局字体单位的选择之px、rem和em揭秘

       一般我们在pc上主要是流动式布局，采用的单位一般都是px，由于pc屏幕都是很大的，所以不用过多的担心字体单位的选择，但是在移动端呢？那么这完全相反，由于手机屏幕较小，且各种屏幕尺寸你一不小心你布局的样式或者单位字体显得过大这都不是很理想的。那么我们就来说下移动端的字体选择。

      话不多说，直入主题，移动端布局最常见的是单位解决方式，没错就是rem 这是我觉得最好的解决移动端字体或者容器的单位的很好的解决方法，当然你还可以用媒体查询+em和px。先说下它们的区别：

      px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。也是pc端常用的方式。

      em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。特点：

          1.em的值并不是固定的；

          2. em会继承父级元素的字体大小。

          简单点说它的大小是在父级的基础上来放大缩小的。    

      rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算，其实你就可以把它当做html根字体单位，实际上项目里也是这么做的。重点来了：

        因为任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。在项目里的字体、容器（如div等）都可以 用rem,这样的话它就能自己随屏幕尺寸调节了。