css常见长度单位汇总，em和rem的区别，em相对于自身的字体大小

叁歲伎倆 2024-04-08 09:29 71阅读 0赞

分为相对单位和绝对单位

## 绝对单位 ##

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cm</td> 
   <td>厘米</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>毫米</td> 
  </tr> 
  <tr> 
   <td>in</td> 
   <td>英寸 (1in = 96px = 2.54cm)</td> 
  </tr> 
  <tr> 
   <td>px</td> 
   <td>* 像素 (1px = 1/96th of 1in)</td> 
  </tr> 
  <tr> 
   <td>pt</td> 
   <td>点，point，大约1/72英寸； (1pt = 1/72in)</td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td>派卡，pica，大约 12pt，1/6英寸； (1pc = 12 pt)</td> 
  </tr> 
 </tbody> 
</table>

\*像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

## 相对单位 ##

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>em</td> 
   <td>它是描述相对于应用在<strong>当前元素的字体尺寸</strong>，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；</td> 
  </tr> 
  <tr> 
   <td>rem</td> 
   <td>rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。</td> 
  </tr> 
  <tr> 
   <td>ex</td> 
   <td>依赖于英文字母小 x 的高度</td> 
  </tr> 
  <tr> 
   <td>ch</td> 
   <td>数字 0 的宽度</td> 
  </tr> 
  <tr> 
   <td>vw</td> 
   <td>viewpoint width，视窗宽度，1vw=视窗宽度的1%</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>viewpoint height，视窗高度，1vh=视窗高度的1%</td> 
  </tr> 
  <tr> 
   <td>vmin</td> 
   <td>vw和vh中较小的那个</td> 
  </tr> 
  <tr> 
   <td>vmax</td> 
   <td>vw和vh中较大的那个。</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td>相对于父元素</td> 
  </tr> 
 </tbody> 
</table>

\*视窗（Viewport）= 浏览器窗口的尺寸

## em和rem的区别 ##

em相对于自身的字体大小  
rem相对于根元素的字体大小