pt，px，rem和em之间区别总结

pf_miles 发布于2019-08-30 12:51 / 2236人阅读

摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。

pt与px

在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？

pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366*768显示屏下会显示的小，在1024*768尺寸的显示器下会相对大点。

px和pt转换规则很简单，默认的显示设置中把文字定义为96DPI，由公式px=pt*DPI/72，可得pt=px*3/4。

em和rem

em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。比如：


    我这里的字体显示大小是28px(14px*2)  
    
        我这里显示字体大小是36px(18px*2),而不是上面计算的28px

rem是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的(在body标签里面设置字体大小不起作用)。还是上面那个例子，如果换做rem，结果如下：

我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的

我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的

*补充默认font-size大小是16px(如果html中没有设置的话)。

GPU云服务器云服务器 px2rem html i和em 电脑和云服务器之间怎么传文件公网SLB和ECS之间的流量收费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115121.html

ptem>，pxem>，remem>和em之间区别总结

摘要：与在设计字体的样式中，有些字体设置成，而不是，那是什么，和又有什么关系呢是印刷行业常用的单位，等于英寸，表示绝对长度。指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。 pt与px 在html设计字体的css样式中，有些字体设置成14pt，而不是14px，那pt是什么，和px又有什么关系呢？ pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。px(pixel...

raledong 2019-08-01 15:08 评论0 收藏0
CSS单位计算总结

摘要：单位总结公共部分长度像素，同一屏幕分辨率下是绝对单位。 CSS单位总结公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

zorpan 2019-08-02 11:52 评论0 收藏0
CSS单位计算总结

摘要：单位总结公共部分长度像素，同一屏幕分辨率下是绝对单位。 CSS单位总结公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { border: 1px solid cyan; padding: 10px; margin: 1...

468122151 2019-08-29 17:06 评论0 收藏0
（CSS） pxem>，ptem>，em，remem>的区别

摘要：一绝对长度单位绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。对于打印机和高分辨率的屏幕，一个意味着多个设备像素，因此，每英寸的像素的数量保持在左右。是新增的单位，等于根元素的字体大小。一、绝对长度单位绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨...

Lemon_95 2019-08-29 11:25 评论0 收藏0
关于CSS中的字体尺寸设置

摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。个人翻译，转载请注明出处英文原文：CSS Font Sizing 写在前面上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...

mcterry 2019-08-28 18:09 评论0 收藏0