CSS测量单位介绍

一、像素（px）

像素是最常见也是最基本的CSS测量单位，一个像素表示一个物理像素，即屏幕上的一个点。在使用像素进行样式设计时，需要注意的是不同的物理设备具有不同的像素密度，将同样像素大小的元素在不同密度的设备上展示会有不同的显示效果。同时在响应式设计时，如果只使用像素作为尺寸单位，元素会因为屏幕大小的变化而变得比例不合适，因此需要辅助其他的单位进行配合使用。

div {
  height: 50px;
  width: 100px;
  font-size: 14px;
}

二、EM/REM

EM和REM是相对于文本字体大小的相对单位。EM的大小是基于元素的字体大小而定的，如果元素的字体大小为16px，则1em就是16px。REM是相对于根元素的字体大小确定的。因此REM相对于EM来说更加稳定，可以避免层级嵌套对尺寸的影响。

html {
  font-size: 16px;
}
div {
  font-size: 1.5em;
  padding: 2rem;
}

三、百分比（%）

百分比是相对于包含元素的尺寸来计算的。因此，如果将元素的宽度设置为50%，它将占用父元素宽度的一半。此外，百分比可以用于任何需要尺寸调整的属性，如height和padding等。同时在响应式设计应用中，百分比更加常用，可以通过父子元素之间不同尺寸比例的设置，实现布局及宽高的适应性调节。

div {
  width: 50%;
  padding: 10%;
  margin: 2%;
}

四、视窗单位（vw、vh、vmin、vmax）

视窗单位是相对于浏览器视窗大小的单位。该单位无论屏幕大小如何，都可以确保元素的大小与浏览器视窗保持一致。vw、vh分别表示视窗宽度和高度的百分比，vmin、vmax分别为vw和vh中较小和较大的一个值。视窗单位的使用适用于响应式设计，可以根据视口尺寸动态调整布局大小。

div {
  width: 50vw;
  height: 50vh;
  margin: 5vmin;
}

五、实际长度单位（cm、mm、in、pt、pc）

实际长度单位可以根据打印设计需要将设计稿精确的转换到纸质版面上进行打印。这些单位就是描述实际长度的，包括cm、mm、in、pt和pc。最常用的是pt和px两种单位，在印刷物的设计中，1pt被定义为1/72英寸。

div {
  width: 5cm;
  height: 2in;
  margin: 1pc;
}

六、计算单位（calc）

calc() 函数用于动态计算长度、百分比、角度等值。通过计算单位可以使CSS样式更加灵活，支持更高级别的样式设计。calc() 函数需要包含两个参数之间的运算符，可以是加、减、乘、除等。

div {
  width: calc(50% - 20px);
  height: calc(100vh - 100px);
}