在CSS中，我们经常需要指定元素的尺寸、间距和位置。为此，我们可以使用各种单位来定义这些值。本文将重点介绍CSS中的相对单位和绝对单位，并解释它们之间的区别。
相对单位
百分比（%）：百分比单位是相对于父元素的尺寸来计算的。例如，如果我们将一个元素的宽度设置为50%，它将占据其父元素宽度的一半。百分比单位在实现响应式设计时非常有用，因为它们可以根据父元素的大小自动调整。
em：em单位是相对于父元素的字体大小来计算的。如果没有父元素，则相对于自身的字体大小。例如，如果我们将一个元素的字体大小设置为2em，它将是父元素字体大小的两倍。em单位也可以用于调整元素的尺寸和间距。
rem：rem单位是相对于根元素（html）的字体大小来计算的。与em单位不同，rem单位不受父元素的影响。这使得rem在实现整体缩放效果时非常有用，因为只需调整根元素的字体大小即可改变所有相关元素的尺寸。
vh和vw：vh单位表示视窗高度的百分比，而vw单位表示视窗宽度的百分比。这些单位可以用于创建基于视窗尺寸的自适应布局。例如，如果我们将一个元素的高度设置为50vh，它将占据视窗高度的一半。
| 单位 | 描述 | 相对性 | 父元素影响 | 响应式 |
|---|---|---|---|---|
| 百分比（%） | 相对于父元素的尺寸来计算 | 相对单位 | 是 | 是 |
| em | 相对于父元素的字体大小来计算 | 相对单位 | 是 | 是 |
| rem | 相对于根元素的字体大小来计算 | 相对单位 | 否 | 是 |
| vh | 相对于视窗高度的百分比 | 相对单位 | 否 | 是 |
| vw | 相对于视窗宽度的百分比 | 相对单位 | 否 | 是 |
绝对单位
像素（px）：像素是最常见的绝对单位。它表示屏幕上的物理像素点。当我们使用像素作为单位时，元素的尺寸将以固定的像素值显示。这些单位不会自动调整大小，因此在不同设备和屏幕尺寸上可能会导致布局问题。
点（pt）：点是印刷行业常用的单位，它等于1/72英寸。与像素类似，点单位也是固定的，不会根据设备或屏幕尺寸进行自适应调整。
厘米（cm）、毫米（mm）和英寸（in）：这些单位也是绝对单位，用于表示长度。与像素和点不同，它们是基于物理尺寸的单位。然而，这些单位也不会根据设备或屏幕尺寸进行自适应调整。
| 单位 | 描述 | 相对性 | 父元素影响 | 响应式 |
|---|---|---|---|---|
| 像素（px） | 物理像素点 | 绝对单位 | 否 | 否 |
| 点（pt） | 印刷行业常用单位，1/72英寸 | 绝对单位 | 否 | 否 |
| 厘米（cm） | 物理长度单位 | 绝对单位 | 否 | 否 |
| 毫米（mm） | 物理长度单位 | 绝对单位 | 否 | 否 |
| 英寸（in） | 物理长度单位 | 绝对单位 | 否 | 否 |
实例演示
当使用相对单位和绝对单位时，我们可以通过一个实例来更好地理解它们之间的区别。假设我们有一个包含文本的
使用相对单位（百分比和em）：
<style>
.container {
width: 50%;
}
.text {
font-size: 2em;
}
</style>
<div class="container">
<p class="text">Hello, World!</p>
</div>
在这个例子中，我们将容器的宽度设置为50%。这意味着无论父元素的宽度是多少，容器都会占据其宽度的一半。接下来，我们使用em单位将文本的字体大小设置为父元素字体大小的两倍。这样，无论父元素的字体大小是多少，文本的字体大小都会相应调整。
使用绝对单位（像素和点）：
<style>
.container {
width: 300px;
}
.text {
font-size: 12pt;
}
</style>
<div class="container">
<p class="text">Hello, World!</p>
</div>
在这个例子中，我们将容器的宽度设置为300像素。这意味着容器的宽度将始终保持为300像素，无论父元素的大小如何。接下来，我们使用点单位将文本的字体大小设置为12点。点单位是固定的，不会根据父元素或其他因素进行自动调整。
通过这个实例，你可以看到相对单位根据父元素的尺寸和字体大小进行自适应调整，而绝对单位保持固定的大小。这展示了相对单位和绝对单位之间的区别。
rem与px
rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据您自己的需求来定。 我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系：
| px | rem |
|---|---|
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
为了方便计算，时常将在元素中设置font-size值为62.5%: 相当于在中设置font-size为10px，此时，上面示例中所示的值将会改变：
| px | rem |
|---|---|
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
rem自适应布局
使用rem可以实现移动端各种尺寸的自适应布局，原理是根据rem是相对html的单位，通过JS控制实现1rem=100px
假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}
//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
使用范例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta content="caibaojian" name="author"/>
<title>前端开发博客</title>
<link rel="stylesheet" href="base.css">
<script type="text/javascript">
//引入上面js
</script>
</head>
<body>
<!-- 正文 -->
</body>
</html>
总结
相对单位（百分比、em、rem、vh、vw）是根据其他因素来计算的，如父元素尺寸、字体大小或视窗尺寸。它们具有灵活性和响应式特性，适用于实现自适应布局和调整大小。
绝对单位（像素、点、厘米、毫米、英寸）是固定的单位，不会根据设备或屏幕尺寸进行自适应调整。它们适用于需要固定尺寸的情况，但在不同设备上可能会导致布局问题。
在选择使用相对单位还是绝对单位时，需根据具体需求和设计目标进行权衡。相对单位适用于响应式设计和自适应布局，而绝对单位适用于需要固定尺寸的情况。合理地使用这些单位可以帮助我们创建出适用不同屏幕尺寸和设备上都表现良好的网页布局。
希望这篇文章能帮助你更好地理解CSS中的相对单位和绝对单位，并在实际开发中做出明智的选择。记住，灵活运用这些单位可以帮助我们创造出适应性强、响应式的网页设计。
