px、em、rem和%的区别与总结

px这个单位用的非常多，相信大家都很熟悉。px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。

 

1. px是固定长度单位，不随其它元素的变化而变化
2. em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化
3. rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化
4. px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位
5. 一般来说：1em = 1rem = 100% = 16 px