前端用到的那些单位-富录

单位在各个领域中都非常常见，前端开发中也不例外。不同的单位有着不同的用途，本文将详细介绍前端中常用的单位及其使用注意事项，包括 pt、px、em、rem、vh、vw、vmax、vmin、rpx、ch 等单位的定义、用法及注意点。

pt（点）
单位名称为点（Point），是一个绝对长度单位。1pt = 1/72英寸，通常用于印刷中。在AI、PS等设计软件中，字体大小常用 pt 作为单位。它在广告印刷行业十分常见，但在网页中几乎不再使用。使用 pt 定义字体大小时，如果用户设置了超过96DPI的显示分辨率（转化公式：px = pt * DPI / 72），则字体会变大。
px（像素）
单位名称为像素，属于相对长度单位。像素 px 是相对于显示器屏幕的分辨率而言的，使用非常广泛。用 px 定义字体时，字体大小不会因为用户的设置而改变。
em（相对单位）
em 是一个相对长度单位，没有固定值，它相对于当前对象内文本的字体大小。例如，若当前元素没有显式设置字体大小，则会相对于浏览器的默认字体大小。需要注意的是，如果父级元素设置了 em 并定义了字体大小，子元素的字体大小也会受父级影响。
rem（根 em）
rem 是 CSS3 引入的相对单位，相对于 HTML 根元素（通常是 <html> 元素）。通过 rem 可以只修改根元素的字体大小来成比例地调整所有子元素的字体大小，避免字体大小逐层复合的问题。除了 IE8 及更早版本，所有主流浏览器都支持 rem。

如果对单位转换有疑问，可以使用 pxtoem.com 工具来转换 pt、px 和 em。

在响应式布局中，我们通常会使用 rem 单位来进行适配，但它可能需要嵌入 JavaScript 来动态计算元素大小。为了解耦 CSS 和 JS，CSS3 引入了视口单位，使我们能够更精确地基于浏览器的可视区域进行布局。

什么是视口？
在桌面端，视口指浏览器的可视区域；在移动端，视口指的是布局视口（Layout Viewport）。

四个视口单位的定义：

例如，若浏览器视口宽度为 370px，则 1vw = 370px * 1% = 3.7px。

rpx 是微信小程序中使用的单位，它根据屏幕宽度自适应。微信小程序规定屏幕宽度为 750rpx，例如，iPhone 6 的屏幕宽度为 375px，对应 750rpx，1rpx = 0.5px。微信小程序也支持 rem 单位，rem 和 rpx 的换算关系是：1rem = 750rpx / 20。

开发微信小程序时，设计师通常会将 iPhone 6 的屏幕宽度作为视觉稿标准，设计图上的尺寸可以直接转为 rpx。

ch
ch 是 CSS3 中新增的单位，表示 "0" 字形的宽度。它主要应用于等宽字体，表示一个字符的宽度。例如，在等宽字体中，"0" 字形的宽度和其他字形的宽度是相同的。这个单位通常在处理字符宽度时使用。
ex
ex 单位表示当前字体的 x-height，通常是该字体小写字母“x”的高度。它在 CSS1 中就已存在，但很少在实际开发中使用，支持度也不如 ch 单位。ex 单位的值是相对于字体大小的一半。

在移动端使用 vw 单位
使用 vw 作为唯一的单位进行布局是一个常见的做法。可以根据设计稿的尺寸转换为 vw 单位，无论是文本、布局的宽高、间距等，都使用 vw。
但是，vw 单位依赖视口的大小，可能导致某些情况下没有最大最小宽度限制。为了解决这个问题，通常会结合使用 rem 和 vw，利用 rem 来进行布局，并设置根元素大小（例如通过 vw 动态改变根元素大小），同时限制字体的最大最小值。

前端开发中，合理使用不同的单位对于页面的适配和布局至关重要。了解并掌握这些单位的使用方法，可以大大提高开发效率，并使页面在不同设备上具有更好的表现。在开发过程中，结合不同的单位，根据实际需求选择合适的单位是非常重要的。

前端用到的那些单位