当前位置： 首页 > article >正文

rem、em、vw区别

article 2026/4/18 21:34:42

在前端开发里，rem、em、vw都是用来设置元素大小的单位，下面就用大白话讲讲它们的区别。

参考标准不一样

  • rem：就像大家都用同一把“大尺子”来量东西，这把“大尺子”就是网页里根元素（也就是 <html> 标签）的字体大小。不管元素在网页里的哪个位置，只要用rem做单位，它的大小就按照这把“大尺子”来算。比如根元素字体大小是16px，那么1rem就是16px，2rem就是32px。
  • em：每个元素自己有一把“小尺子”，这把“小尺子”的长度取决于这个元素本身或者它爸爸元素（父元素）的字体大小。要是这个元素自己没设置字体大小，就用它爸爸元素的字体大小当“尺子”；要是自己设置了，就用自己的字体大小当“尺子”。所以不同元素的“小尺子”可能不一样长。
  • vw：它的参考标准是浏览器窗口（视口）的宽度。把浏览器窗口的宽度平均分成100份，1vw就相当于其中的1份。就好比把一块蛋糕切成100小块，每一小块就是1vw。如果浏览器窗口宽度是1000px，那1vw就是10px。

计算难度有差别

  • rem：计算很简单，只要知道根元素的字体大小，用rem前面的数字乘以根元素字体大小，就能算出元素实际大小。比如根元素字体大小是20px，3rem就是60px（20×3）。
  • em：计算比较麻烦，尤其是在网页里元素一层套一层的时候。因为每个元素的“小尺子”可能不同，得先搞清楚当前元素或者它父元素的字体大小，才能算出em对应的实际尺寸。比如父元素字体大小是18px，子元素没设置字体大小，子元素里2em就是36px（18×2）；要是子元素自己设置了字体大小是22px，那子元素里2em就是44px（22×2）。
  • vw：计算相对容易，只要知道浏览器窗口的宽度，用窗口宽度乘以vw前面的数字再除以100，就能得到元素实际宽度。比如窗口宽度是800px，5vw就是40px（800×5÷100）。

适用场景各不同

  • rem：适合用来统一控制网页的整体布局和元素大小。要是想让网页里很多元素的大小跟着根元素字体大小一起变，用rem就很方便。比如在做响应式网页时，改变根元素字体大小，整个网页的布局就能按比例缩放。
  • em：常用来设置元素内部的相对大小，像元素的内边距、外边距、边框这些。这样能保证元素的这些部分和它自身的字体大小相匹配，不管字体大小怎么变，元素整体看起来都协调。比如按钮的内边距设成0.5em，按钮字体大小改变时，内边距也会跟着变，按钮外观就不会失调。
  • vw：特别适合那些需要根据浏览器窗口宽度动态调整大小的元素。比如做一个全屏的轮播图，用vw做单位，不管用户用的是手机、平板还是电脑，轮播图都能占满一定比例的窗口宽度，自动适应不同设备。

代码示例感受一下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>/* 设置根元素字体大小 */html {font-size: 16px;}.parent {font-size: 20px;}.rem-box {width: 2rem;/* 宽度为 2 * 16px = 32px */height: 2rem;background-color: lightblue;}.em-box {width: 2em;/* 宽度为 2 * 20px = 40px，因为继承了父元素 20px 的字体大小 */height: 2em;background-color: lightgreen;}.vw-box {width: 10vw;/* 宽度为视口宽度的 10% */height: 10vw;background-color: lightcoral;}</style>
</head><body><div class="parent"><div class="rem-box">这是用rem单位的元素</div><div class="em-box">这是用em单位的元素</div><div class="vw-box">这是用vw单位的元素</div></div>
</body></html>

在这个例子里，三个盒子分别用了rem、em、vw做单位，能很直观地看到它们在计算和显示上的不同。

相关文章：

rem、em、vw区别

在前端开发里&#xff0c;rem、em、vw都是用来设置元素大小的单位&#xff0c;下面就用大白话讲讲它们的区别。 参考标准不一样 rem&#xff1a;就像大家都用同一把“大尺子”来量东西&#xff0c;这把“大尺子”就是网页里根元素&#xff08;也就是 <html> 标签&#…...

编程日记 2026/1/18 9:12:22

【PHP】php+mysql 活动信息管理系统（源码+论文+数据库+数据库文件）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、测试技术。 【PHP】php 活动信息管理系统&#xff08;源码论文…...

编程日记 2026/4/17 17:10:03

cURL请求与Javascript请求转换工具

cURL请求与Javascript请求在线转换工具（如 curlconverter） 首先，看看各个证据中关于curl的定义。提到cURL是“Client for URLs”的缩写，最初全大写是为了方便记忆，社区也将其解释为“Client URL Request Library”或递归的“Curl URL Request Library”。同时，还指出cURL…...

编程日记 2025/7/6 8:32:12

rv1103b编译opencv

opencv-3.4.16&#xff0c;png的neon会报错&#xff0c;如果想开可以参考 https://blog.csdn.net/m0_60827485/article/details/137561429 rm -rf build mkdir build cd build cmake -DCMAKE_BUILD_TYPERELEASE \ -DCMAKE_C_COMPILERxxx/arm-rockchip831-linux-uclibcgnueabih…...

编程日记 2025/5/31 12:02:08

thingboard告警信息格式美化

原始报警json内容&#xff1a; { "severity": "CRITICAL","acknowledged": false,"cleared": false,"assigneeId": null,"startTs": 1739801102349,"endTs": 1739801102349,"ackTs": 0,&quo…...

编程日记 2026/4/8 4:14:40

OpenHarmonry 5.0.1源码下载与编译

预置环境&#xff1a;硬盘500G、内存32G、Ubuntu 20.04.6 LTS Ubuntu系统下载路径&#xff1a;ubuntu-releases安装包下载_开源镜像站-阿里云 一、必需环境 sudo apt-get update && sudo apt-get install binutils binutils-dev git git-lfs gnupg flex bison gperf…...

编程日记 2026/4/13 17:41:51

【Python深入浅出㊸】解锁Python3中的TensorFlow：开启深度学习之旅

目录 一、TensorFlow 简介1.1 定义与背景1.2 特点 二、Python 3 与 TensorFlow 的关系2.1 版本对应2.2 为何选择 Python 3 三、安装 TensorFlow3.1 安装步骤3.2 验证安装 四、TensorFlow 基本概念与使用方法4.1 计算图&#xff08;Graph&#xff09;4.2 会话&#xff08;Sessio…...

编程日记 2026/1/4 21:01:17

STM32 外部中断和NVIC嵌套中断向量控制器

目录 背景 外部中断/事件控制器(EXTI) 主要特性 功能说明 外部中断线 嵌套向量中断控制器 特性 ‌中断线&#xff08;Interrupt Line&#xff09; 中断线的定义和作用 STM32中断线的分类和数量 优先级分组 抢占优先级&#xff08;Preemption Priority&#xff09; …...

编程日记 2026/4/16 1:17:38

string类详解（上）

文章目录 目录1. STL简介1.1 什么是STL1.2 STL的版本1.3 STL的六大组件 2. 为什么学习string类3. 标准库中的string类3.1 string类3.2 string类的常用接口说明 目录 STL简介为什么学习string类标准库中的string类string类的模拟实现现代版写法的String类写时拷贝 1. STL简介 …...

编程日记 2026/4/17 12:15:04

DeepSeek教unity------Dotween

1、命名法 Tweener&#xff08;补间器&#xff09;&#xff1a;一种控制某个值并对其进行动画处理的补间。 Sequence&#xff08;序列&#xff09;&#xff1a;一种特殊的补间&#xff0c;它不直接控制某个值&#xff0c;而是控制其他补间并将它们作为一个组进行动画处理。 Tw…...

编程日记 2025/11/17 22:26:24

AIP-146 泛化域

编号146原文链接AIP-146: Generic fields状态批准创建日期2019-05-28更新日期2019-05-28 API中的大多数域&#xff0c;无论是在请求、资源还是自定义应答中&#xff0c;都有具体的类型或模式。这个模式是约定的一部分&#xff0c;开发者依此约定进行编码。 然而&#xff0c;偶…...

编程日记 2025/11/27 7:22:18

【Go并发编程】Goroutine 调度器揭秘：从 GMP 模型到 Work Stealing 算法

每天一篇Go语言干货&#xff0c;从核心到百万并发实战&#xff0c;快来关注魔法小匠&#xff0c;一起探索Go语言的无限可能&#xff01; 在 Go 语言中&#xff0c;Goroutine 是一种轻量级的并发执行单元&#xff0c;它使得并发编程变得简单高效。而 Goroutine 的高效调度机制是…...

编程日记 2026/3/17 4:55:13

【前端】Vue组件库之Element: 一个现代化的 UI 组件库

文章目录 前言一、官网1、官网主页2、设计原则3、导航4、组件 二、核心功能&#xff1a;开箱即用的组件生态1、丰富的组件体系2、特色功能亮点 三、快速上手&#xff1a;三步开启组件化开发1、安装&#xff08;使用Vue 3&#xff09;2、全局引入3、按需导入&#xff08;推荐&am…...

编程日记 2026/3/21 8:12:06

第十五天 学习并实践HarmonyOS应用的基本结构、页面导航和状态管理

HarmonyOS应用开发入门&#xff1a;从基本结构到状态管理实战指南 前言 &#xff08;约300字&#xff0c;说明HarmonyOS的发展前景&#xff0c;应用开发的市场需求&#xff0c;以及本教程的核心价值。强调手把手教学特点&#xff0c;降低学习门槛&#xff09; 一、HarmonyOS应…...

编程日记 2026/3/12 8:22:38

Cursor生成JAVA相关的关键词提示规则

在项目根目录创建一个.curstorrules文件&#xff08;注意有个小数点&#xff09;&#xff0c;之后在该文件内填入下面内容 你是 Java 编程、Spring Boot、Spring Framework、Maven、JUnit 及相关 Java 技术的专家。 代码风格与结构 编写整洁、高效且文档完善的 Java 代码&am…...

编程日记 2025/6/1 9:46:53

数据结构：队列（Queue）及其实现

队列&#xff08;Queue&#xff09;是一种广泛使用的线性数据结构&#xff0c;它遵循先进先出&#xff08;FIFO&#xff0c;First In, First Out&#xff09;的原则。也就是说&#xff0c;最早插入队列的元素会最先被移除。队列是一种典型的顺序存取结构&#xff0c;它与栈&…...

编程日记 2026/4/13 16:06:28

MoE架构中的专家选择门控机制：稀疏激活如何实现百倍效率突破？

技术原理&#xff08;数学公式与核心逻辑&#xff09; 核心公式 门控网络输出&#xff1a; G ( x ) Softmax ( W g ⋅ x b g ) G(x) \text{Softmax}(W_g \cdot x b_g) G(x)Softmax(Wg​⋅xbg​) 最终输出&#xff1a; y ∑ i 1 n G i ( x ) ⋅ E i ( x ) (仅保留Top-…...

编程日记 2025/5/25 21:55:06

坐井说天阔---DeepSeek-R1

前言 DeepSeek-R1这么火&#xff0c;虽然网上很多介绍和解读&#xff0c;但听人家的总不如自己去看看原论文。于是花了大概一周的时间&#xff0c;下班后有进入了研究生的状态---读论文。 DeepSeek这次的目标是探索在没有任何监督数据的情况下训练具有推理能力的大模型&#…...

编程日记 2026/3/12 16:34:10

UART（一）——UART基础

一、定义 UART（Universal Asynchronous Receiver/Transmitter）是一种广泛使用的串行通信协议，用于在设备间通过异步方式传输数据。它无需共享时钟信号，而是依赖双方预先约定的参数（如波特率）完成通信。 功能和特点 基本的 UART 系统只需三个信号即可提供稳健的中速全双工…...

编程日记 2026/4/12 5:43:14

DeepSeek 的创新融合：多行业应用实践探索

引言 在数字化转型的浪潮中&#xff0c;技术的融合与创新成为推动各行业发展的关键力量。蓝耘平台作为行业内备受瞩目的创新平台&#xff0c;以其强大的资源整合能力和灵活的架构&#xff0c;为企业提供了高效的服务支持。而 DeepSeek 凭借先进的人工智能技术&#xff0c;在自然…...

编程日记 2026/4/18 17:45:06

C语言中的常量与只读变量，#define与const的区别

#include中的#表明C处理器需要在编译器接手工作之前先处理这条指令。 #define 这条定义宏的语句&#xff0c;是不是很熟悉&#xff0c;这条预处理指令会在编译器编译前把源文件中使用到这个宏的地方都先展开。 #define NUM 12 这个定义了一个宏常量&#xff0c;它的处理发生编…...

编程日记 2025/3/14 11:59:05

Python常见面试题的详解6

1. 按字典 value 值排序 要点&#xff1a;对于给定字典&#xff0c;使用 sorted() 函数结合 items() 方法&#xff0c;依据 value 进行排序&#xff0c;也可以定义一个通用函数&#xff0c;支持按 value 升序或降序排序。示例&#xff1a; python d {a: 1, b: 2, c: 3, d: …...

编程日记 2025/12/30 14:00:44

CentOS 7超详细安装教程（含镜像）

1. 安装前准备 1.1 CentOS简介 CentOS&#xff08;Community Enterprise Operating System&#xff0c;中文意思是&#xff1a;社区企业操作系统&#xff09;是一种基于 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码构建的免费开源操作系统。它在稳定性、安全…...

编程日记 2026/3/31 0:59:50

代码随想录day12

144.二叉树的前序遍历 //明确递归的函数&#xff0c;结束边界&#xff0c;单层逻辑 void traversal(TreeNode* node, vector<int>& list){if(node nullptr){return;}list.push_back(node->val);traversal(node->left, list);traversal(node->right, list)…...

编程日记 2025/5/21 0:48:15

langchain学习笔记之消息存储在内存中的实现方法

langchain学习笔记之消息存储在内存中的实现方法 引言背景消息存储在内存的实现方法消息完整存储&#xff1a;完整代码 引言 本节将介绍 langchain \text{langchain} langchain将历史消息存储在内存中的实现方法。 背景 在与大模型交互过程中&#xff0c;经常出现消息管理方…...

编程日记 2025/11/12 4:45:59

布隆过滤器（简单介绍）

布隆过滤器&#xff08;Bloom Filter&#xff09; 是一种高效的概率型数据结构&#xff0c;用于快速判断一个元素是否可能存在于某个集合中。它的核心特点是空间效率极高&#xff0c;但存在一定的误判率&#xff08;可能误报存在&#xff0c;但不会漏报&#xff09;。 核心原理…...

编程日记 2025/6/22 16:11:48

Qt中基于开源库QRencode生成二维码(附工程源码链接)

目录 1.QRencode简介 2.编译qrencode 3.在Qt中直接使用QRencode源码 3.1.添加源码 3.2.用字符串生成二维码 3.3.用二进制数据生成二维码 3.4.界面设计 3.5.效果展示 4.注意事项 5.源码下载 1.QRencode简介 QRencode是一个开源的库&#xff0c;专门用于生成二维码&…...

编程日记 2026/4/16 9:24:46

SpringBoot教程（三十二） SpringBoot集成Skywalking链路跟踪

SpringBoot教程&#xff08;三十二&#xff09; | SpringBoot集成Skywalking链路跟踪 一、Skywalking是什么&#xff1f;二、Skywalking与JDK版本的对应关系三、Skywalking下载四、Skywalking 数据存储五、Skywalking 的启动六、部署探针 前提&#xff1a; Agents 8.9.0 放入 …...

编程日记 2026/4/4 1:39:39

IntelliJ IDEA 接入 AI 编程助手（Copilot、DeepSeek、GPT-4o Mini）

IntelliJ IDEA 接入 AI 编程助手&#xff08;Copilot、DeepSeek、GPT-4o Mini&#xff09; &#x1f4ca; 引言 近年来&#xff0c;AI 编程助手已成为开发者的高效工具&#xff0c;它们可以加速代码编写、优化代码结构&#xff0c;并提供智能提示。本文介绍如何在 IntelliJ I…...

编程日记 2026/4/17 20:05:49

【机器学习】深入浅出KNN算法：原理解析与实践案例分享

在机器学习中&#xff0c;K-最近邻算法&#xff08;K-Nearest Neighbors, KNN&#xff09;是一种既直观又实用的算法。它既可以用于分类&#xff0c;也可以用于回归任务。本文将简单介绍KNN算法的基本原理、优缺点以及常见应用场景&#xff0c;并通过一个简单案例帮助大家快速入…...

编程日记 2026/4/18 16:03:17