HTML前端开发-- CSS 长度单位总结

引言

在前端开发中，CSS 起着至关重要的作用，它负责网页的视觉表现。CSS 长度单位是控制网页布局和设计的关键因素之一。了解和掌握各种长度单位对于创建响应式和适应不同设备屏幕的网页至关重要。本文将总结 CSS 中常用的长度单位，重点介绍 REM 单位的应用。

一、CSS 长度单位概览

CSS 提供了多种长度单位，用于定义元素的尺寸、间距等属性。以下是一些最常用的 CSS 长度单位：

1. 像素（px）

像素是CSS中最常用的长度单位，它相当于屏幕上的一个点。由于像素是绝对单位，因此使用像素定义的尺寸在不同设备和分辨率上的表现是一致的。

css 复制代码

element {
  width: 100px;
  height: 50px;
}

2. 百分比（%）

百分比是基于父元素的尺寸计算的相对单位。使用百分比可以创建灵活的布局，使得元素的尺寸能够根据父容器的尺寸变化而变化。

css 复制代码

.parent {
  width: 500px;
}

.child {
  width: 50%; /* 子元素宽度为父元素宽度的一半 */
}

3. 相对视窗单位（vw/vh）

视窗宽度（vw）和视窗高度（vh）是相对于浏览器视窗的宽度和高度的单位。它们非常适合用于创建响应式设计。

css 复制代码

.full-width {
  width: 100vw; /* 元素宽度等于视窗宽度 */
}

.full-height {
  height: 100vh; /* 元素高度等于视窗高度 */
}

4. 相对字体单位（em/rem）

em 和 rem 是基于字体尺寸的相对单位。em 是相对于当前元素的字体尺寸，而 rem 是相对于根元素（html）的字体尺寸。

css 复制代码

html {
  font-size: 16px; /* 默认字体大小 */
}

.element-em {
  font-size: 2em; /* 字体大小是父元素字体大小的两倍 */
}

.element-rem {
  font-size: 1.5rem; /* 字体大小是根元素字体大小的1.5倍 */
}

5. 根em（ch）

ch 单位是相对于数字"0"的宽度。这个单位对于创建网格布局非常有用，因为它提供了一个基于字符宽度的一致尺寸。

css 复制代码

.element-ch {
  width: 3ch; /* 元素宽度是数字"0"宽度的三倍 */
}

6. 视口高度（vh）

视口高度（vh）是相对于浏览器视口的高度的单位。与 vw 类似，vh 也常用于响应式设计。

css 复制代码

.element-vh {
  height: 75vh; /* 元素高度是视窗高度的75% */
}

7. 无单位（0）

在某些情况下，不指定单位可以表示特定的值。例如，margin: 0 或 opacity: 0。

css 复制代码

.hidden {
  opacity: 0; /* 元素完全透明 */
}

8.动态计算 calc 函数

calc() 是 CSS 中的一个函数，用于执行元素属性值的计算。它是一个非常有用的工具，可以让你在一行代码中执行多个计算，从而减少代码的复杂性，并使得动态调整属性值变得更加容易。以下是 calc() 函数的一些关键点：

1. 基本语法

calc() 函数的基本语法如下：

css 复制代码

property: calc(expression);

其中 property 是 CSS 属性，expression 是需要计算的表达式。

2. 支持的运算符

calc() 支持以下运算符：

加法（+）：用于将两个或多个值相加。
减法（-）：用于从一个值中减去另一个值。
乘法（*）：用于将两个值相乘。
除法（/）：用于将一个值除以另一个值。

3. 支持的单位

calc() 可以处理几乎所有的 CSS 单位，包括但不限于：
长度单位：px, em, rem, vh, vw, % 等。
颜色单位：rgb, rgba, hsl, hsla 等。
时间单位：s, ms 等。

4. 使用场景

动态调整尺寸：根据父元素或视口的尺寸动态调整元素的宽度、高度、边距和填充。

简化代码：在一个属性中同时使用多个单位，减少代码量。

实现响应式设计：根据不同的屏幕尺寸或设备特性调整元素的样式。

5. 示例

以下是一些使用 calc() 的示例：

css 复制代码

/* 宽度计算 */
width: calc(100% - 20px);

/* 边距计算 */
margin: calc(10px * 2) auto;

/* 透明度计算 */
opacity: calc(0.5 + 0.3);


/* 颜色混合 */
background-color: calc(50% + 50%) transparent;

6. 注意事项

calc() 函数中的表达式需要用逗号分隔，如果只有一个值，则不需要逗号。

在 calc() 中使用除法时，确保除数不为零。

尽量保持 calc() 表达式的简洁性，以便于维护和理解。

二、rem 单位详解

1. 定义和基本概念

rem 是 CSS3 中新增加的一个相对长度单位，全称为"root em"，即相对于根元素（通常是 HTML 文档的根元素）的字体大小来计算。这意味着 1rem 等于 HTML 元素的字体大小，对于大多数浏览器而言，默认值为 16px

。

2. 计算方法

rem 的工作原理很简单：它根据根元素的字体大小确定基准值，并将其他元素的尺寸设置为基准值的倍数。例如，如果根元素的字体大小为 16px，将某个元素的宽度设置为 2rem，则该元素的宽度将为 32px（2乘以16）。

3. 动态计算 rem

动态计算 rem 是指根据设备的特性或用户的偏好，在页面加载或窗口大小改变时，通过 JavaScript 动态计算根元素的字体大小，从而实现对 rem 单位的动态调整。这种技术通常与媒体查询结合使用，以便根据屏幕尺寸或设备类型来确定根元素的字体大小。

4. 实现响应式设计

使用 rem 单位的好处之一是它可以实现页面元素的自适应布局。当用户改变浏览器的字体大小时，根元素的字体大小会跟着变化，从而影响到所有基于 rem 单位的元素尺寸。这使得页面可以根据用户的偏好或设备的特性进行动态适配，从而提供更好的用户体验。

5. 移动端适配

在移动端适配中，rem 单位常与设计稿宽度和实际屏幕宽度的比例结合使用。例如，如果设计稿宽度为 750px，而实际屏幕宽度为 375px，则 1rem 可以设置为 50px（即 375/750 * 100），这样设计稿上的 100px 在实际屏幕上就是 2rem。

6. JavaScript 实现

在实际应用中，可以通过 JavaScript 动态设置 html 的 font-size 来改变 rem 的大小，以达到网页自适应大小的目的。例如：

javascript 复制代码

(function(w, d) {
  function setSize() {
    var screenWidth = d.documentElement.clientWidth;
    var currentFontSize = screenWidth * 100 / 750;
    d.documentElement.style.fontSize = currentFontSize + 'px';
  }
  w.addEventListener('resize', setSize);
  w.addEventListener('pageShow', setSize);
  w.addEventListener('DOMContentLoaded', setSize);
})(window, document);

这段代码会根据屏幕宽度动态调整 html 的 font-size，从而影响 rem 的大小。