CSS单位全解析

发布时间：2025-02-17 11:34

《房地产投资全书》：房产理财的全方位解析 #生活技巧# #财务管理技巧# #金融理财书#

小程序现在应用到的单位越来越多，我们经常会搞不清楚他们的含义。所以我就参考网上众多博主的文章，整理了一个文档专门对各个单位进行解释。
1 pt
单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt，它在广告印刷业当中十分受欢迎，也非常的好用。但现在在网页当中，pt几乎不出现了。使用pt定义文字，当用户设置超过96DPI（转化公式：px = pt * DPI / 72）的值，数值越大，字体就越大。
2 px
单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。使用px定义文字，无论用户怎么设置，都不会改变大小。
3 em
单位名称为相对长度单位。它没有一个固定数值，支持小数点后三位数，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。需要注意的是：若父级单位用了em，且设置了文本大小，这父级大小会随文本大小而改变，会继承父级元素的字体大小。
4 rem
是CSS3新增的一个相对单位（root em，根em），是相对HTML根元素。通过它既可以做到只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

5 视口单位
vw：1vw = 视口宽度的1%
vh：1vh = 视口高度的1%
vmax：vmax选取vw和vh中最大的那个.
vmin：vmin选取vw和vh中最小的那个.
6 rpx
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。
7 ch
这个ch 单位是由CSS3规范引入的一个新单位，表示“0”字形的宽度。它应该是最不为人知的一个新单位，因为在绝大多数场景下，我们并不关心0 这个字符显示出来到底有多宽。但对等宽字体来说，这是个例外。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的。
8 ex
ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。x-height:小写字母x的高度(阅读更多关于The Anatomy of Web Typography)ex单位在css1中已经存在，但是你不会找到对ch单位有像这样坚实的支持。具体支持，在Eric Meyer’s 的博客中查看CSS单位和值。

9 pc
绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
in = 2.54cm = 25.4 mm = 72pt = 6pc

10 in
绝对长度单位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

11 mm
绝对长度单位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

12 cm
绝对长度单位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

13 fr
css fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

以上内容参考链接： https://www.jianshu.com/p/f9b34885609d https://www.cnblogs.com/913815ccmm/p/4858638.html http://caibaojian.com/fr.html 123

网址：CSS单位全解析 https://www.yuejiaxmz.com/news/view/778848

上一篇：人形机器人或迎“量产元年”

下一篇：微信小程序创建滑块视图容器