Question

彻底弄懂css中单位px和em，rem的区别

Answer 1

px是像素点（Pixel）

em是当前元素所使用的字体的大写英文字母M的宽度，之所以指定是M，是因为在比例字体中每个字母的宽度是不相等的（比如W和i的宽度就差别很大），而在等宽字体（比如汉字）中，每个字符的宽度是相等的，所以em就是字符的宽度（或者说是汉字宽度的一半）

rem则是页面根元素的字体宽度（r就是root，根），其他解释同上

px是一个绝对长度单位，就是说指定一个元素的宽度是100px，那么它的宽就固定为100像素；而em则是一个相对长度单位，比如说一个元素的宽度是4em，而这个元素的字体宽度为12px，则这个元素的实际宽度就是48px，而如果把这个元素的字体大小改为16px，则这个元素的实际宽度也自动变为64px；至于rem，是为了让这个页面所有使用rem作为长度单位的元素都可以随页面根元素（通常是指html或body）的字体大小而自动调整，这样的话只需要改变根元素的字体大小，就可以实现改变整个页面外观的目的，通常用于响应式页面布局。