概念介绍:
1,px (pixel, 像素):
是一个虚拟长度单位, 是计算机系统的数字化图像长度单位, 如果 px 要换算成物理长度, 需要指定精度 DPI(Dots Per Inch, 每英寸像素数), 在扫描打印时一般都有 DPI 可选. Windows 系统默认是 96dpi,Apple 系统默认是 72dpi.
2,em(相对长度单位, 相对于当前对象内文本的字体尺寸):
是一个相对长度单位, 最初是指字母 M 的宽度, 故名 em. 现指的是字符宽度的倍数, 用法类似百分比, 如: 0.8em, 1.2em,2em 等. 通常 1em=16px.
3,pt (point, 磅):
是一个物理长度单位, 指的是 72 分之一英寸. pt=1/72(英寸), px=1/dpi(英寸)
4,rem(root em, 根 em):
是 CSS3 新增的一个相对单位, 这个单位引起了广泛关注. 这个单位与 em 有什么区别呢? 区别在于使用 rem 为元素设定字体大小时, 仍然是相对大小, 但相对的只是 html 根元素. 这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应. 目前, 除了 IE8 及更早版本外, 所有浏览器均已支持 rem. 对于不支持它的浏览器, 应对方法也很简单, 就是多写一个绝对单位的声明. 这些浏览器会忽略用 rem 设定的字体大小.
1,em 与 px 的问题
px 是何物?
px 像素 (Pixel). 相对长度单位. 像素 px 是相对于显示器屏幕分辨率而言的.(引自 CSS2.0 手册) em 是相对长度单位. 相对于当前对象内文本的字体尺寸. 如当前对行内文本的字体尺寸未被人为设置, 则相对于浏览器的默认字体尺寸.(引自 CSS2.0 手册) PX 特点
IE 无法调整那些使用 px 作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位;
Firefox 能够调整 px 和 em,rem, 但是 96% 以上的中国网民使用 IE 浏览器 (或内核).
em 是何物?
em 指字体高, 任意浏览器的默认字体高都是 16px. 所以未经调整的浏览器都符合: 1em=16px. 那么 12px=0.75em, 10px=0.625em. 为了简化 font -size 的换算, 需要在 CSS 中的 body 选择器中声明 Font-size=62.5%, 这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10, 然后换上 em 作为单位就行了.
em 特点:
1em 指的是一个字体的大小, 它会继承父级元素的字体大小, 因此并不是一个固定的值. 任何浏览器的默认字体大小都是 16px. 因此, 12px = 0.75em. 实际应用中为了方便换算, 通常会如下设置样式: CSS 代码
HTML { font-size: 62.5%; }
这样, 1em = 10px. 我们常用的 1.2em 理论上就是 12px. 但是, 这个换算在 IE 浏览器下不成立, 1.2em 会比 12px 稍大一些, 解决办法是把 HTML 标签样式中的 62.5% 改成 63%, 即: CSS 代码
HTML { font-size: 63%; }
在 中文的文章中, 一般会在段首空两格. 如果用 px 作为单位, 对 12px 字体来说需要空出 24px, 对 14px 字体来说需要空出 28px...... 这样换算非常不通 用. 如果用上 em 单位, 这个问题就很好解决了, 1 个字的大小就是 1em, 那两个字的大小就是 2em. 因此, 只需这样定义就行了: CSS 代码
p { text-indent: 2em; }
em 和 px 两种字体单位的区别
字体单位应该用 em 而不用 px, 原因简单来说就是支持 IE6 下的字体缩放, 在页面中按 ctrl + 滚轮, 字体以 px 为单位的网站没有反应. px 是绝对单位, 不支持 IE 的缩放, em 是相对单位. 我在调整本 blog 的时候, 发现不仅仅是字体, 将行距 (line-height), 和纵向高度的单位都用 em. 保证缩放时候的整体性.
em 有如下特点:
em 的值并不是固定的;
em 会继承父级元素的字体大小.
em 重写步骤:
body 选择器中声明 Font-size=62.5%;
将你的原来的 px 数值除以 10, 然后换上 em 作为单位; 简 单吧, 如果只需要以上两步就能解决问题的话, 可能就没人用 px 了. 经过以上两步, 你会发现你的网站字体大得出乎想象. 因为 em 的值不固定, 又会继承父级 元素的大小, 你可能会在 content 这个 div 里把字体大小设为 1.2em, 也就是 12px. 然后你又把选择器 p 的字体大小也设为 1.2em, 但如果 p 属于 content 的子级的话, p 的字体大小就不是 12px, 而是 1.2em= 1.2 * 12px=14.4px. 这是因为 content 的字体大小被设为 1.2em, 这个 em 值继承其父级元素 body 的大小, 也就是 16px * 62.5% * 1.2=12px, 而 p 作为其子级, em 则继承 content 的字体高, 也就是 12px. 所以 p 的 1.2em 就不再是 12px, 而是 14.4px.
重新计算那些被放大的字体的 em 数值. 避免字体大小的重复声明, 也就是避免以上提到的 1.2 * 1.2= 1.44 的现象. 比如说你在 #content 中声明了字体大小为 1.2em, 那么在声明 p 的字体大小时就只能是 1em, 而不是 1.2em, 因为此 em 非彼 em, 它因继承 #content 的字体高而变为了 1em=12px.
IE 中的 12px 汉字:
完成 em 转换时还发现了一个诡异的现象, 就是由以上方法得到的 12px(1.2em) 大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小, 而 是稍大一点. 你只需在 body 选择器中把 62.5% 换成 63% 就能正常显示了. 原因可能是 IE 处理汉字时, 对于浮点的取值精确度有 限. 本现象只发生在 12px 的汉字, 英文不存在此现象. 解决方法就是把 style.CSS 中的 62.5% 换 为 63%.
一个 px,em,pt 单位转换工具:
地址: http://pxtoem.com/
2,rem 特点
rem 是 CSS3 新增的一个相对单位 (root em, 根 em), 这个单位引起了广泛关注. 这个单位与 em 有什么区别呢? 区别在于使用 rem 为元素设定字体大小时, 仍然是相对大小, 但相对的只是 HTML 根元素. 这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应. 目前, 除了 IE8 及更早版本外, 所有浏览器均已支持 rem. 对于不支持它的浏览器, 应对方法也很简单, 就是多写一个绝对单位的声明. 这些浏览器会忽略用 rem 设定的字体大小. 举例:
p {font-size:14px; font-size:.875rem;}
注意: 选择使用什么字体单位主要由你的项目来决定, 如果你的用户群都使用最新版的浏览器, 那推荐使用 rem, 如果要考虑兼容性, 那就使用 px, 或者两者同时使用.
3, 字体换算表
字号 | 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://juejin.im/post/5c09ee54518825477c16fd8b