px, em, rem的区别

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

移动端布局最常见的是单位解决是rem .还可以用媒体查询+em和px

px（绝对长度单位）

像素px是相对于显示器屏幕分辨率而言的。也是pc端常用的方式

em（相对长度单位）

例子如下：

1.png

2.png

图2的是1.6em的font-size大小, 1.6em是25.6px

3.png

图3是1em 或者 1rem的大小,
1em = 1rem = 16px

浏览器的默认字体都是16px，那么1em=16px，以此类推计算12px=0.75em，10px=0.625em，2em=32px；

这样使用很复杂，很难很好的与px进行对应,也导致书写、使用、视觉的复杂(0.75em、0.625em全是小数点)；

为了简化font-size的换算，我们在body中写入一下代码

    body {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */  

这样页面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px，使得视觉、使用、书写都得到了极大的帮助。

如:

    
我是1.6em

image.png

但是缺点就是
1、em的值并不是固定的；

2、em会继承父级元素的字体大小（参考物是父元素的font-size；）；

3、em中所有的字体都是相对于父元素的大小决定的；所以如果一个设置了font-size:1.2em的元素在另一个设置了font-size:2em的元素里, 那么计算的结果是1.2X2=2.4em

image.png

image.png

rem (相对单位)

rem和em的大小与px的转换相同,
但是 不同的是 rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸

image.png

image.png

所以rem 是相对于根元素html。不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多
！！！！！！IE8（IE9及以上），Safari 4或 iOS 3.2中不支持rem单位,