一文读懂 CSS 单位

家好，我是Echa。

最近有不少的粉丝老铁们私信我为啥这几天没有创作新内容了，实在对不住。小编我身在广州中招羊了，我在最近一篇文章也有提到过，今天是第四天，基本上康复了，奥密克戎BA.5其实没有那么恐怖，中招了前三天特难受，熬过来了就没事了，大家莫慌。现在小编就可以认认真真的继续创作内容了。同时也非常感谢大家默默的关心我小编身体状况，非常谢谢。

创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！

说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！

1. 相对单位

相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：

字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch；
视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。

下面就来看看这些常见的CSS单位。

（1）em 和 rem

em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。

em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。

当然，上面的这个说法是不严谨的。来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：

那如果我们给子元素的字体设置为30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：

所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。

em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。

rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：

如果没有对根元素设定字号的话，font-size: 1rem的作用与font-size: initial相同。

使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小，而不是固定大小。那何时应使用 em，何时应使用 rem 呢？可以根据两者的差异来进行选择：

两者在客户端中计算出来的样式都会以px的形式显示；
rem是相对于根元素html的font-size计算，em 相对于元素的font-size计算；
当需要根据浏览器的font-size设置缩放时，应该使用 rem；
使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定；
rem 可以从浏览器字体设置中继承 font-size 值， em 可能受任何继承过来的父元素 font-size 的影响。

（2）ex 和 ch

ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size 和 font-family属性。

ex 指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的。
ch 和 ex 类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。

（3）vw、vh、vmax 和 vmin

这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。如果视窗大小发生了变化，那么这些值都会随之变化。这四个单位指的是：

vw：视窗宽度的百分比；
vh：视窗高度的百分比；
vmax：较大的 vh 和 vw；
vmin：较小的 vh 和 vw。

假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。

vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。

这些单位都是长度单位，所以可以在任何允许使用长度单位的地方使用。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。

2. 绝对单位

在 CSS 中，绝对单位包括：px 、pt 、pc、 cm 、 mm 、in 等。绝对单位是一个固定的值，它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率（DPI，每英寸的点数）。px就是我们最常用的绝对单位之一。这些绝对单位的换算关系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全称为 Pixels，表示像素，它并不严格等于显示器的像素，尤其在高清屏下。尽管CSS单位会根据浏览器、操作系统或者硬件适当缩放，在某些设备或者用户的分辨率设置下也会发生变化，但是96px通常等于一个物理英寸的大小。

CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。一个“600x400”解析度的照片的长宽分别为“600px”和“400px”，所以照片本身的像素并不会与显示装置像素一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。

很多时候， px 也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，因为像素单位相对的是设备像素。在同一个设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的；在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全称为 Point，表示点。常用于软件设计和排版印刷行业（笔者做的前端系统，最终的产物就是一个需要拿去印刷的PDF，所以会经常用到这个单位）。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。

如果单纯为了网页的显示，建议就使用px像素单位，如果需要输出印刷产品，就可以考虑使用pt。

（3）pc

pc 全程为 Picas，表示派卡。相当于我国新四号铅字的尺寸。派卡也是印刷的术语，1派卡等于12点。它和 px 的换算关系如下：

1pc = 16px

（4）cm

cm 全称为 Centimeters，表示厘米。它和 px 的换算关系如下：

1cm = 37.8px

（5）mm

mm 全称为 Millimeters，表示毫米。它和 px 的换算关系如下：

1mm = 3.78px

（6）in

in 全称为 Inches，表示英寸。它和 px 的换算关系如下：

1in = 96px

3. 频率单位

CSS中的频率单位有两个：赫兹（Hz）和千赫兹（kHz）。它们的换算关系如下：

1kHz = 1000Hz

通常情况下，频率单位使用在听或说级联样式表中。频率可以被用来改变一个语音阅读文本的音调。低频率就是低音，高频率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，当数值为0时，单位对值没有影响，但是单位是不能省略的。也就是说0、0Hz、0kHz是不一样的。所以，在使用频率单位时，不要直接写0。另外，这两个单位是不区分大小写的。

4. 时间单位

CSS中的时间单位有两个：秒（s）和毫秒（ms）。这两个时间单位都是CSS新增的单位。这两个单位的换算关系如下：

1s = 1000ms

时间单位主要用于过度和动画中，用于定义持续时间或延迟时间。下面两种定义是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率单位

CSS中的分辨率单位有三个：dpi、dpcm、dppx。这三个单位都是CSS3中华新增的单位。他们都是正值，不允许为负值。这三个单位的换算关系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率单位主要用于媒体查询等操作。

（1）dpi

dpi 全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72或96个点，大于 192dpi 的屏幕被称为高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全称为 dots per centimeter，表示每厘米包含的点的数量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全称为 dots per pixel，表示每像素（px）包含点的数量。由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度单位

CSS中的角度单位有四个：deg、grad、rad、turn。这些角度单位都是CSS3中新增的单位。它们的换算关系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般这些角度单位用于元素的旋转操作，包括2D旋转、3D旋转等。

当旋转值为正值时，元素会顺时针旋转；
当旋转值为负值时，元素会逆时针旋转。

通常情况下，一个完整的旋转就是360度。所以，所有的角度都在0-360度之间。但是，超出这个范围的值也是允许的，只不过都会归到0-360度之间。比如，顺时针旋转420度（450deg）、逆时针旋转270度（-270deg）、顺时针旋转90度（90deg）都是一样的效果，都会归为90deg。但是当使用动画时，这些角度值就非常重要了。

CSS的旋转主要依赖于 transform 属性中的 rotate() 、rotate3d、 skew() 等方法。只需给它们传递旋转的角度即可。

除了旋转会使用角度之外，线性渐变也会经常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全称为 Degress，表示度，一个圆总共360度。

transform: rotate(2deg);

（2）grad

grad 全称为 Gradians，表示梯度，一个圆总共400梯度。

transform: rotate(2grad);

（4）rad

rad 全称为 Radians，表示弧度，一个圆总共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全称为 Turns，表示圈（转），一个圆总共一圈（转）。

transform:rotate(.5turn);

7. 百分比单位

百分比（%）也是我们比较常用的单位之一，所有接受长度值的属性都可以使用百分比单位。但是不同属性使用该单位的效果可能并不一样。但是都需要有一个参照值，也就是说百分比值是一个相对的值。

下面来看看常见场景中的百分比单位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的属性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。这些属性在使用百分比时，参照物不尽相同：

width、max-width、min-width：值为百分比时，其相对于包含块的 width 进行计算；
height、max-height、min-height：值为百分比时，其相对于包含块的 height 进行计算；
padding、margin：值为百分比时，如果是水平的值，就是相对于包含块的 width 进行计算；如果是垂直的值，就是相对于包含块的 height 进行计算。

（2）文本中的百分比

在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。这些属性在使用百分比时，参照物不尽相同：

font-size：根据父元素的font-size 进行计算；
line-height：根据font-size进行计算；
vertical-align：根据line-height进行计算；
text-indent：如果是水平的，则根据width进行计算，如果是垂直的，则根据 height 进行计算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块的同方向的width和height。不同定位的包含块不尽相同：

如果元素为静态（ static ）或相对定位（ relative ），包含块一般是其父容器；
如果元素为绝对定位（ absolute ），包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素；
如果元素为固定定位（ fixed ），包含块就是视窗（ viewport ）。

（4）变换中的百分比

CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比。

translateX() 根据容器的 width 计算
translateY() 根据容器的 height 计算
transform-origin 中横坐标（ x ）相对于容器的 width 计算；纵坐标（ y ）相对于容器的 height 计算

注意，在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。

端就是一个大杂烩，做为前端工程师需要掌握的知识点太多了。各种长度单位需要我们去了解

除了这些还有印刷单位 pt pc pt cm mm in....

毫无疑问现在统治前端的长度单位还是px, 一个相遇对于屏幕分辨率的像素单位。

px: 全称pixel（像素）是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或者小方块（虽然可以用点和小方块来呈现），而是一个抽象概念。它是一个相对单位，相对于屏幕分辨率，而不是视窗大小。像素越高像px长度越小。

如果你要开发响应式页面px就显得力不从心了。需要写很多的媒体相应去调整页面布局。

然后em横空出世。

em:相对单位，基准点为父节点字体的大小.

这个货是个富N代，总是以倍数的方式来继承父元素的px值,如果自身定义了font-size按自身来计算（大多浏览器默认字体是16px），整个页面内1em不是一个固定的值。

举个栗子：

		<div style="font-size:1.2em;">1.2em
			<div style="font-size:1.2em;">1.2em
				<div style="font-size:1.2em;">1.2em
					<div style="font-size:1.2em;">1.2em
						<div style="font-size:1.2em;">1.2em</div>
					</div>
				</div>
			</div>
		</div>

显示效果：

HTML根元素默认为16px 那么16 x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。最内层的元素的字体大小就是39.8px；

为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为 16px*62.5%=10px）, 之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

em使用起来太麻烦了。麻烦不怕，只要有麻烦就有懒人出来想办法，把他搞定。

于是rem跳了出来：

rem:是CSS3新增的一个相对单位，相对的只是HTML根元素.也就是每个元素通过倍数乘以根元素的px值。

rem,是非常传统的只认根元素（HTML）上的单位。那么如果你改变了根元素上的字体大小。整个页面字体大小也会随之改变，因为这个特点非常适合做响应式开发的页面长度单位。

那么我们只需要使用js来实现根据页面分辨率调整html的字体大小就可以使适应不同的分辨率。

突然出现了一个rpx。

rpx: 微信小程序专用单位，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

为啥要把它列出来呢，因为已经有了微信小程序工程师的职位。可见微信小程序的影响力有多大。

%：百分比，实在没啥好介绍的。此处略过一万字。

其他跑龙套的字体

pt：印刷机的每个「点」，定义为1 pt ＝ 1/72 in，如果在72 dpi的系统上1 px = 1 pt，但如果在96 dpi的系统上1 px = 0.75 pt ( 72 /96 = 0.75 )。

in：英寸，在96 dpi的系统上1 in = 96 px。

cm：厘米，在96 dpi的系统上1 cm = 37.795275593333 px。

mm：毫米，在96 dpi的系统上1 mm = 3.7795275593333 px

好了，聊完了，祝各位在像素世界里玩儿的开心。

家好，我是皮皮，今天给大家分享一些前端的知识。

一、了解 CSS 单位

测量长度的单位可以是绝对的，例如像素，点等，也可以是相对的，例如百分比（%）和 em 单位。

指定 CSS 单位对于非零值是必须的，因为没有默认单位。丢失或忽略单位将被视为错误。但是，如果该值为 0，则可以省略该单位（毕竟，零像素与零英寸是一样的）。

注意： 长度是指距离测量。长度包括数字值，后面加单位，比如 10px、2em、50% 等。数字和单位之间不能出现空白。

二、相对长度单位

相对长度单位指定相对于另一个长度属性的长度。相对单位是描述：em当前的字体大小。

ex ：当前字体的 x 高度。

em 和 ex 单位取决于套用至元素的字体大小。

1. 使用 em 单位

em 的值等于使用它的元素的 font-size 属性的计算值。它可用于垂直或水平测量。

例如，如果 font-size 元素设置为 16px，并且 line-height 设置为 2.5em，则 line-height像素计算值为：2.5 x 16px = 40px。

P {
    font-size: 16px;
    line-height: 2.5em;
}

运行效果

当在 font-size 属性本身的值中指定 em 时会发生异常，在这种情况下，它引用父元素的字体大小。

因此，当我们用 em 指定字体大小时，1em 继承自 font-size。因此， font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>平安保险</title>
        <link rel="stylesheet" type="text/css" href="css/fy.css" />
    </head>


    <body>
        <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
        <title>项目</title>
        <style>
            body {
                font-size: 62.5%;
                font-family: Arial, Helvetica, sans-serif;
            }


            p {
                font-size: 1.6em;
            }


            p:firt-letter {
                font-size: 3em;
                font-weight: bold;
            }
</style>


        <body style="text-align: center; background-color: aquamarine;">
            <div>ddad</div>
            <p> Hellow world</p>
        </body>


</html>

代码解析：浏览器中字体的默认大小为 16px。我们的第一步是通过将主体设置 font-size 为 62.5% 来减小整个文档的大小，这会将字体大小重置为 10px（16px 的 62.5%）。

这是默认 font-size的四舍五入，方便 px 到 em的转换。

2. 使用 ex 单位

ex 单位等于当前字体的 x 高度。

所谓的 x 高度是因为它通常等于小写 x 的高度，如下所示。但是， ex 即使对于不包含 x 的字体，也会定义的。

P {
    font-size: 16ex;
    line-height: 2.5em;
}

三、绝对长度单位

绝对长度单位相对于彼此固定。它们高度依赖于输出介质，因此在输出环境已知时主要有用。绝对单位由物理单位（的 in、cm、mm、pt、pc）和 px 单位。表中j进行属性的详细介绍。

单位	描述
in	英寸 - 1 英寸等于 2.54 厘米。
cm	厘米。
mm	毫米。
pt	points - 在 CSS 中，一个点定义为 1⁄72 英寸（0.353mm）。
pc	picas - 1pc 等于 12pt。
px	像素单位 - 1px 等于 0.75pt。

绝对物理单位，例如 in、cm、mm 等应被用于打印介质和类似的高分辨率的设备。然而，对于桌面和低分辨率设备等屏幕显示，建议使用像素或 em 单位。

例：

   h1 {
                margin: 0.5in;
            }
            /* inches  */


            h2 {
                line-height: 3cm;
            }
            /* centimeters */


            h3 {
                word-spacing: 4mm;
            }
            /* millimeters */


            h4 {
                font-size: 12pt;
            }
            /* points */


            h5 {
                font-size: 1pc;
            }
            /* picas */


            h6 {
                font-size: 12px;
            }
            /* picas */

提示： 使用相对单位（如 em 或百分比 %）的样式表可以更轻松地从一个输出环境扩展到另一个输出环境。

四、总结

本文主要介绍了css单位的运用，通过两个方面展开，相对长度单位，绝对长度单位，在项目中需要注意的点，需要注意的事项，都进行了详细的讲解和提供了对应的解决方案。代码很简单，希望可以帮助你学习。

如果在操作过程中有任何问题，记得下面留言，我们看到会第一时间解决问题。

在线咨询

上一篇：Excel图表+Html网页制作动态看板
下一篇：Ps小白成长记：第33天「网页切片与输出」

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商