前端：CSS字体大小 px、em、rem的区别

1、px

1px的长度表示显示器中一个像素（pixel）的长度，实际显示的效果和显示器的 DPI（Dot Per Inch，每英寸像素数）有关，DPI越大每英寸的像素数越多，每个像素的实际大小越小。通常来说分辨率越高的屏幕 DPI也就越高，所以高分辨率屏幕显示的图标和字体都要更小一些。

所有浏览器的默认字体大小都是 16px。

px的特点

  1. IE无法调整那些使用px作为单位的字体大小；
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

2、em

em（font size of the element）是指相对于父元素的字体大小的单位。

所以默认情况下 1em=16px

EM特点

  1. em的值并不是固定的；
  2. em会继承父级元素的字体大小。

3、rem

rem和 em相似，但是 rem是相对于根元素的字体大小单位。

与 em相比 rem更方便计算也更加直观。

但是 rem在 IE8及其以下都不兼容。

其长度单位：
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

参考：
字体大小之px、em、rem、pt,字号详解：https://www.cnblogs.com/zhaowy/p/8400271.html
vw vh视口百分比：https://blog.csdn.net/weixin_44766281/article/details/103044194

如果你不是在简书看到这篇文章，请移步简书支持原作者

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容