CSS中的相对单位和绝对单位，以及rem自适应布局

最新推荐文章于 2024-10-11 15:42:40 发布

前端开发博客

最新推荐文章于 2024-10-11 15:42:40 发布

阅读量1.1k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/lgno2/article/details/132594589

版权

在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）	物理长度单位	绝对单位	否	否

实例演示

当使用相对单位和绝对单位时，我们可以通过一个实例来更好地理解它们之间的区别。假设我们有一个包含文本的

元素，我们希望设置其宽度为父元素宽度的一半，并且字体大小为12像素。

使用相对单位（百分比和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>