HTML Px/Em 换算

前言

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

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

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

      1
      2
      pt = 1/72(英寸)
      px = 1/dpi(英寸)
    • 因此

      1
      pt = px * dpi / 72
    • 以 Windows 下的 96dpi 来计算

      1
      1 pt = px * 96/72 = px * 4/3
    • 以 Apple 下的 72dpi 来计算

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

    • 通常

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

1、Px、Em 换算工具

  • 以下工具提供了 em 和 px 的换算工具。

    • 第一个输入框:设置了网页默认的字体像素 (通常 16px)
    • 第二个输入框:输入像素值,可以将 px 换算为 em。
    • 第三个输入框:输入 em(相对长度单位)值,可以将 em 换算为 px。
  • Px、Em 换算


设置默认的像素大小:



px




PX 换算为 EM:


px


EM 换算为 PX:


em






换算结果:




2、文本字体大小

  • 下表列出了在网页字体默认值为 16px 时, px 和 em 及网页字体百分比的换算数据。








<tr onclick=”fillTable(5)” )’=””>




<tr onclick=”fillTable(6)” )’=””>




<tr onclick=”fillTable(7)” )’=””>




<tr onclick=”fillTable(8)” )’=””>




<tr onclick=”fillTable(9)” )’=””>




<tr onclick=”fillTable(10)” )’=””>




<tr onclick=”fillTable(11)” )’=””>




<tr onclick=”fillTable(12)” )’=””>




<tr onclick=”fillTable(13)” )’=””>




<tr onclick=”fillTable(14)” )’=””>




<tr onclick=”fillTable(15)” )’=””>




<tr onclick=”fillTable(16)” )’=”” style=”background-color:#555;color:white;”>




<tr onclick=”fillTable(17)” )’=””>




<tr onclick=”fillTable(18)” )’=””>




<tr onclick=”fillTable(19)” )’=””>




<tr onclick=”fillTable(20)” )’=””>




<tr onclick=”fillTable(21)” )’=””>




<tr onclick=”fillTable(22)” )’=””>




<tr onclick=”fillTable(23)” )’=””>




<tr onclick=”fillTable(24)” )’=””>




<tr onclick=”fillTable(25)” )’=””>





px em 百分比
5px 0.3125em 31.25% 6px 0.3750em 37.50% 7px 0.4375em 43.75% 8px 0.5000em 50.00% 9px 0.5625em 56.25% 10px 0.6250em 62.50% 11px 0.6875em 68.75% 12px 0.7500em 75.00% 13px 0.8125em 81.25% 14px 0.8750em 87.50% 15px 0.9375em 93.75% 16px 1.0000em 100.00% 17px 1.0625em 106.25% 18px 1.1250em 112.50% 19px 1.1875em 118.75% 20px 1.2500em 125.00% 21px 1.3125em 131.25% 22px 1.3750em 137.50% 23px 1.4375em 143.75% 24px 1.5000em 150.00% 25px 1.5625em 156.25%

3、字号、Pt、Px、Em 换算表

字号 pt px em 字号 pt px em
初号 42pt 56px 3.5em
小三 15pt 21px 1.3
小初 36pt 48px 3
14.5pt 20px 1.25
34pt 45px 2.75
四号 14pt 19px 1.2
32pt 42px 2.55
13.5pt 18px 1.125
30pt 40px 2.45
13pt 17px 1.05
29pt 38px 2.35
小四 12pt 16px 1
28pt 37px 2.3
11pt 15px 0.95
27pt 36px 2.25
五号 10.5pt 14px 0.875
一号 26pt 35px 2.2
10pt 13px 0.8
25pt 34px 2.125
小五 9pt 12px 0.75
小一 24pt 32px 2
8pt 11px 0.7
二号 22pt 29px 1.8
六号 7.5pt 10px 0.625
20pt 26px 1.6
7pt 9px 0.55
小二 18pt 24px 1.5
小六 6.5pt 8px 0.5
17pt 23px 1.45
七号 5.5pt 7px 0.4375
三号 16pt 22px 1.4
八号 5pt 6px 0.375

4、Px、Em、Rem 区别介绍

4.1 Px

  • px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

  • Px 特点

    • 1、IE 无法调整那些使用 px 作为单位的字体大小;
    • 2、国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位;
    • 3、Firefox 能够调整 px 和 em,rem,但是 96% 以上的中国网民使用 IE 浏览器(或内核)。

4.2 Em

  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

  • Em 特点

    • 1、em 的值并不是固定的;
    • 2、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 作为单位就行了。

  • 所以我们在写 CSS 的时候,需要注意两点:

    • 1、body 选择器中声明 Font-size=62.5%;
    • 2、将你的原来的 px 数值除以 10,然后换上 em 作为单位;
    • 3、重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明。
  • 也就是避免 1.2 * 1.2= 1.44 的现象。比如说你在 #content 中声明了字体大小为 1.2em,那么在声明 p 的字体大小时就只能是 1em,而不是 1.2em, 因为此 em 非彼 em,它因继承 #content 的字体高而变为了 1em=12px。

4.3 Rem

  • rem 是 CSS3 新增的一个相对单位(root em,根 em),这个单位引起了广泛关注。这个单位与 em 有什么区别呢?区别在于使用 rem 为元素设定字体大小时,仍然是相对大小,但相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了 IE8 及更早版本外,所有浏览器均已支持 rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。下面就是一个例子:

    1
    p {font-size:14px; font-size:.875rem;}
  • 注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用 rem,如果要考虑兼容性,那就使用 px,或者两者同时使用。

  • px 与 rem 的选择?

    • 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用 px 即可。

    • 对于需要适配各种移动设备,使用 rem,例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。

文章目录
  1. 1. 前言
  2. 2. 1、Px、Em 换算工具
  3. 3. 2、文本字体大小
  4. 4. 3、字号、Pt、Px、Em 换算表
  5. 5. 4、Px、Em、Rem 区别介绍
    1. 5.1. 4.1 Px
    2. 5.2. 4.2 Em
    3. 5.3. 4.3 Rem
隐藏目录