说说css中pt、px、em、rem都扮演了什么角色

前段时间，终于仔仔细细的把pt、px、em、rem了解了一遍，特意将其相关内容整理成文章，希望能对有需要的人有所帮助。

pt、px、em、rem都是什么

pt单位名称为点（Point），绝对长度单位。现在网页中出现得很少甚至不出现，常用于印刷行业。
单位换算：1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

px单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。
我有几张阿里云幸运券分享给你，用券购买或者升级阿里云相应产品会有特惠惊喜哦！把想要买的产品的幸运券都领走吧！快下手，马上就要抢光了。
em单位名称为相对长度单位。它没有一个固定数值，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem是CSS3新增的一个相对单位（root em，根em）， rem是相对单位，是相对HTML根元素。

四者的特点和关系

pt是一个标准的长度单位， 1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt，它在广告印刷业当中十分受欢迎，也非常的好用。但现在在网页当中，pt几乎不出现了。
优点：适用于印刷业
缺点：网页几乎不用了

px是屏幕上显示的最小单位，所以在网页当中非常受欢迎，因为精准也非常的直观和方便。一些设计类也会使用到px。
优点：精确稳定
缺点：在浏览器中放大或缩小页面后，页面会出现混乱的情况

em这个单位就比较强大了，它是个相对长度单位，拥有着可变的弹性特征。这个单位也受到大部分前端设计师的喜爱，因为是相对数值，所以我们可以设置1em、0.5em、0.25em等，且支持到小数点后三位数，页面也会随页面的放大缩小而做相对应的调整。
优点：灵活变化

缺点：会继承父级元素的字体大小

 
   
点击链接阅读全文：https://yq.aliyun.com/articles/266909?utm_content=m_35547