标签：CSS3 em 显示 字体大小 pt 元素 像素 尺寸 CSS
Px，Pt，em，Rem，vw，vh等尺寸单位
author: Once Day date: 2022年2月1日
1.绝对长度
绝对长度是物理量，代表实际的长度，不随分辨率的高低而变动。
1.1 真实物理长度
-
cm 厘米
-
mm 毫米
-
in 英寸 (1 in=2.54 cm)
-
pt 磅(1 pt=1/72 in)
-
pc 派卡(1 pc =12 pt)
1.2 虚拟长度单位
该单位为数字化图像长度，其与真实单位的切换需要精度DPI(Dots Per Inch，每英寸像素数)，在Windows系统默认是96dpi，Apple系统默认是72dpi。
pt和px的换算公式可以根据pt的定义得出:
pt=1/72(英寸), px=1/dpi(英寸)---->pt=px*dpi/72
因此，当Dpi确定后，也就可以计算Px的真实长度，如下面以Dpi=96dpi为例：
| 字号 | Pt | Px |
|---|---|---|
| 初号 | 42Pt | 56Px |
| 小初 | 36Pt | 48Px |
| 一号 | 26Pt | 35Px |
| 小一 | 24Pt | 32Px |
| 二号 | 22Pt | 29Px |
| 小二 | 18Pt | 24Px |
| 三号 | 16Pt | 22Px |
| 小三 | 15Pt | 21Px |
| 四号 | 14Pt | 19Px |
| 小四 | 12Pt | 16Px |
| 五号 | 10.5Pt | 14Px |
| 小五 | 9Pt | 12Px |
| 六号 | 7.5Pt | 10Px |
2.相对长度
2.1 ex和ch
ex 是依赖于字母小x的高度。在含有 ‘ x ’字母的字体中，它是该小写字母的高度，对于很多字体而言，1ex ≈ 0.5em，即占字体高度的一半。
ch 这一单位代表元素所用字体中 ‘ 0 ’ 这一字形的宽度。
2.2 em、rem和%
em 基准点为父节点字体大小（继承父元素的字体大小），如果自身定义了 font-size，则按自身来计算（浏览器默认字号是 16px）。但整个页面内 1em不是一个固定的值，如果父元素设置了字体大小，那么em就是相对于父元素的字体大小，如果没有设置，那么就是相对于 html 根元素的字体大小。默认情况下1 em=16 Px。
rem 可理解为‘root em’，相对根节点 html（网页）的字体大小来计算。它不会像 em 那样，依赖于父元素的字体大小，从而造成混乱 。如果没有设置，那么 rem 始终等于浏览器默认大小 16px 。rem 的一个特点就是用户可以通过调整浏览器的字号，进而改变页面的文本字体大小。
% 相对父元素的大小。对不同的情况下父元素的选取也有不同：
-
对于普通定位元素，其父元素即正常继承产生的父节点。
-
对于绝对定位(position：absolute;)的元素，其父元素是其相对已定位的父元素。
-
对于固定定位(position：fixed;)的元素，其父元素是 ViewPort（可视窗口）。
2.3 vw，vh，vmin和vmax
-
vwviewpoint width 视窗宽度，1vw=视窗宽度的1%。例如，浏览器宽度1200px，1vw = 12px。
-
viewpoint height 视窗高度，1vh=视窗高度的1%。例如，浏览器高度900px，1vh = 9px。
-
vmin vw和vh中较小的那个。
-
vmax vw和vh中较大的那个。
3.css像素和设备像素
CSS 像素(CSS Pixel) :又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。
设备像素(Device Pixels) :又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。比如 iPhone 6 的分辨率为 750 x 1334px
设备像素比(DevicePixelRatio) :DPR = 设备像素 / CSS 像素
这里的 CSS 像素其实是理想视口，例如，iPhone 6 物理像素为 750 x 1334，理想视口 375 x 667 ，DPR = 2。在Retian屏上，DPR不再是1，而是大于1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者为非整数（一些Android机），说不定还会涨。
例如，iPhone 6的物理像素上面已经说了，是750 * 1334，而它的逻辑像素是 375 * 667。我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，据此很容易计算出DRP为2。
4.参考文章
4.CSS像素（px）、物理像素（pt）、rem、em、rpx
标签：CSS3,em,显示,字体大小,pt,元素,像素,尺寸,CSS 来源： https://blog.csdn.net/Once_day/article/details/122768425
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。