常用px,pt,em换算表

pt (point,磅)是一个物理长度单位,指的是72分之一英寸。

px (pixel,像素)是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

em(相对长度单位,相对于当前对象内文本的字体尺寸)是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

字号:是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。

pt和px的换算公式可以根据pt的定义得出:

pt=1/72(英寸), px=1/dpi(英寸)

因此 pt=px*72/dpi

以Windows下的96dpi来计算,pt=px*72/96=px*3/4

 

字号

pt

px

em

初号

42pt

56px

3.5em

小初

36pt

48px

3em

 

34pt

45px

2.75em

 

32pt

42px

2.55em

 

30pt

40px

2.45em

 

29pt

38px

2.35em

 

28pt

37px

2.3em

 

27pt

36px

2.25em

一号

26pt

35px

2.2em

 

25pt

34px

2.125em

小一

24pt

32px

2em

二号

22pt

29px

1.8em

 

20pt

26px

1.6em

小二

18pt

24px

1.5em

 

17pt

23px

1.45em

三号

16pt

22px

1.4em

小三

15pt

21px

1.3em

 

14.5pt

20px

1.25em

四号

14pt

19px

1.2em

 

13.5pt

18px

1.125em

 

13pt

17px

1.05em

小四

12pt

16px

1em

 

11pt

15px

0.95em

五号

10.5pt

14px

0.875em

 

10pt

13px

0.8em

小五

9pt

12px

0.75em

 

8pt

11px

0.7em

六号

7.5pt

10px

0.625em

 

7pt

9px

0.55em

小六

6.5pt

8px

0.5em

七号

5.5pt

7px

0.4375em

八号

5pt

6px

0.375em

 

转载于:https://www.cnblogs.com/zyl824/p/7047836.html

### CSS中 `px`, `em`, 和 `rem` 的区别及用法 #### 1. 定义与特性 - **`px`**: 表示屏幕上的物理像素,是一种绝对单位。它的值不会随浏览器缩放或视口变化而改变[^2]。每个 `px` 对应显示设备的一个单一像素。 - **`em`**: 是一种相对长度单位,基于当前元素的父级字体大小计算。默认情况下,大多数浏览器设置的初始字体大小为 16px,因此未调整前 1em = 16px。通过修改 body 字体大小(如设为 62.5%),可以使 1em 转化为更易于管理的比例关系,即 1em ≈ 10px[^1]。 - **`rem`**: 同样是相对长度单位,但它始终相对于根元素 `<html>` 的字体大小定义。无论嵌套层次如何,`rem` 不会受任何父级元素的影响,这使得它非常适合全局一致性的布局需求[^3]。 #### 2. 计算方式 - 如果 HTML 设置如下: ```css html { font-size: 16px; } div { font-size: 18px; } span { font-size: 1.5em; /* 相对于最近的父元素 */ } ``` 则 `<span>` 的实际字体大小将是 `1.5 * 18px = 27px`,因为 `em` 基于直接父级 `div` 的字体大小计算。 - 若改为使用 `rem`: ```css span { font-size: 1.5rem; /* 相对于根元素 <html> */ } ``` 此时 `<span>` 的字体大小则为 `1.5 * 16px = 24px`,独立于中间层 `div` 的设定。 #### 3. 使用场景 - **`px`**: - 当需要精确控制页面元素尺寸时适用。 - 如按钮宽度、图片高度等固定不变的设计细节。 - **`em`**: - 更适合局部范围内的比例调节,比如段落文字相对于标题字号缩小的情况。 - 或者构建动态适应不同分辨率的小型模块结构。 - **`rem`**: - 推荐用于整体网站框架搭建以及大型组件样式制定。 - 提供更好的可维护性和一致性,在响应式网页设计中有显著优势[^4]。 ```css /* 示例代码展示三种单位的实际应用 */ /* 全局基础配置 */ html { font-size: 16px; /* 默认基准 */ } body { font-size: 62.5%; /* 修改后便于 em/px 换算 */ } /* 局部控件采用 px 实现精准定位 */ .button { width: 120px; height: 40px; } /* 文本内容利用 em 达成灵活适配 */ p { font-size: 1.2em; /* 等价于原生约 19.2px */ } h1 { font-size: 2em; /* 大小依据上下文环境自动调整 */ } /* 主题风格切换依靠 rem 维护统一标准 */ .container { padding: 2rem; /* 固定间距不依赖特定区域属性 */ } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值