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

rem、em、vw区别

news 2026/5/4 0:00:15

在前端开发里，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> 标签&#…...

编程日记 2025/2/18 13:50:48

最新Apache Hudi 1.0.1源码编译详细教程以及常见问题处理

1.最新Apache Hudi 1.0.1源码编译 2.Flink、Spark、Hive集成Hudi 1.0.1 3.flink streaming写入hudi 目录 1. 版本介绍 2. 安装maven 2.1. 下载maven 2.2. 设置环境变量 2.3. 添加Maven镜像 3. 编译hudi 3.1. 下载hudi源码 3.2. 修改hudi源码 3.3. 修改hudi-1.0.1/po…...

编程日记 2025/2/18 13:49:46

C语言简单练习题

文章目录 练习题一、计算n的阶乘bool类型 二、计算1!2!3!...10!三、计算数组arr中的元素个数二分法查找 四、动态打印字符Sleep()ms延时函数system("cls")清屏函数 五、模拟用户登录strcmp()函数 六、猜数字小游戏产生一个随机数randsrandRAND_MAX时间戳time() 示例 …...

编程日记 2025/2/18 13:48:44

C++ ——static关键字

1、static修饰局部变量---->静态局部变量 特点&#xff1a; &#xff08;1&#xff09;第一次调用时创建&#xff0c;然后第一次调用结束时没有被回收&#xff0c;以后每次调用&#xff0c;都延用上一次调用结束时的值&#xff0c;直到程序结束时&#xff0c;才被回收 &a…...

编程日记 2025/2/18 13:47:43

Jasper AI技术浅析（二）：语言模型

Jasper AI 的核心语言模型是基于 OpenAI 的 GPT-4（Generative Pre-trained Transformer 4）构建的。GPT-4 是一种生成式预训练语言模型，利用深度学习技术，特别是 Transformer 架构，来理解和生成自然语言。 1. GPT-4 的基本原理 1.1 Transformer 架构 GPT-4 基于 Transfo…...

编程日记 2025/2/18 13:45:39

QML 部件获得焦点触发的全局槽函数 onActiveFocusItemChanged

在qml的window窗口中&#xff0c;假如添加里许多其他部件&#xff0c;当这些部件改变时&#xff0c;会有一个全局部件焦点改变槽函数触发&#xff0c;就是 onActiveFocusItemChanged 可以通过此槽函数就可以知道当前焦点在哪一个部件上&#xff0c;也可以做一些自动化测试等&…...

编程日记 2025/2/18 13:43:35

【git】工作场景下的 工作区 ＜-＞ 暂存区＜-＞ 本地仓库 命令实战 具体案例

&#x1f680; Git 工作区 → 暂存区 → 本地仓库 → 回退实战 Git 的核心流程是&#xff1a; &#x1f449; 工作区&#xff08;Working Directory&#xff09; → git add → 暂存区&#xff08;Staging Area&#xff09; → git commit → 本地仓库&#xff08;Local Repos…...

编程日记 2025/2/18 13:42:30

Python 中从零开始的随机梯度下降

文章目录 一、说明二、了解基础知识的重要性&#xff1a;2.1 什么是梯度下降&#xff1f;2.2 梯度下降的类型&#xff1a; 三、随机梯度下降 &#xff08;SGD&#xff09; 有何不同3.1 随机性的概念&#xff1a;3.2 SGD的优点和缺点&#xff1a; 四、随机梯度下降的分步说明五、…...

编程日记 2025/2/18 13:40:27

期权隐含波动率是什么意思？

财顺小编本文主要介绍期权隐含波动率是什么意思&#xff1f;期权隐含波动率&#xff08;Implied Volatility&#xff09;是根据当前期权市场价格&#xff0c;利用期权定价模型&#xff08;如Black-Scholes模型&#xff09;推导出的关于合约标的理论上的价格波动率。它反映了市场…...

编程日记 2025/2/18 13:37:20

python中使用数据库sqlite3

Python使用sqlite3数据库 python3.x标准库内置了SQLite3 查看sqlite的版本 import sqlite3 sqlite_version sqlite3.sqlite_version print(f"SQLite version: {sqlite_version}") 显示 导入模块连接sqlitte3 import sqlite3 consqlite3.connect("d:/fi…...

编程日记 2025/2/18 13:36:14

JavaScript数组-数组的概念

在JavaScript编程中&#xff0c;数组&#xff08;Array&#xff09;是一种非常重要的数据结构&#xff0c;它允许我们将多个值存储在一个单独的变量中。数组可以包含任意类型的元素&#xff0c;如数字、字符串、对象甚至是其他数组&#xff0c;并提供了丰富的内置方法来操作这些…...

编程日记 2025/2/18 13:35:10

英语---基础词汇库

〇、动词类&#xff08;常见谓语表述&#xff09; 1.show&#xff0c;indicate&#xff0c;find 认为&#xff0c;表明 2.improve,promote,boost,enhance,increase&#xff0c;advocate&#xff0c;strength 改善&#xff0c;提升&#xff0c;促进&#xff0c;增强&#xff0…...

编程日记 2025/2/18 13:33:03

ASCII 与 Unicode：两种字符编码的定义和不同

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 &#x1f4af;前言&#x1f4af;一、ASCII编码详解1.1 ASCII的组成1.2 ASCII的局限性 &#x1f4af;二、Unicode编码详解2.1 Unicode编码方式2.2 Unicode的字符范围 &#x1f4af;三、ASCII与Unicode的…...

编程日记 2025/2/18 13:32:00

Linux相关概念和易错知识点（28）（线程控制、Linux下线程的底层）

目录 1.线程控制 &#xff08;1&#xff09;pthread和thread库 &#xff08;2&#xff09;线程的创建、等待和分离 ①线程创建 ②线程等待 ③线程分离 ④线程替换&#xff08;不可行&#xff09; &#xff08;3&#xff09;线程的终止和取消 ①线程终止 ②线程取消 2…...

编程日记 2025/2/18 13:28:50

lighten() 函数被弃用：替代方案color.scale()或者color.adjust()

在 SCSS (Sass 的一个语法) 中&#xff0c;lighten() 函数用于调整颜色的亮度。然而&#xff0c;随着 Sass 语言的不断发展&#xff0c;一些旧函数被标记为弃用&#xff0c;以鼓励使用更现代、更灵活的 API。lighten() 函数就是其中之一。 1. 弃用通知 当您看到 lighten() is…...

编程日记 2025/2/18 13:27:45

【leetcode】双指针：有效三角形的个数 and 和为s的两个数

文章目录 1. 有效三角形的个数1.题目2.讲解算法原理3.代码 2.和为s的两个数1.题目2.思路3.代码 1. 有效三角形的个数 1.题目 示例1解析&#xff1a; 2.讲解算法原理 3.代码 class Solution { public:int triangleNumber(vector<int>& nums) {sort(nums.begin(), …...

编程日记 2025/2/18 13:26:43

IDEA通过Contince接入Deepseek

Deepseek 的出色表现&#xff0c;上期【Deepseek得两种访问方式与本地部署】 安装Continue插件 第一步、下载插件 在编辑栏【File】->设置【Settiings】或快捷键【CtrlAltS】,弹窗的左侧导航树&#xff0c;选择【plugins】,在marketplace 搜索【Continue】&#xff0c;点…...

编程日记 2025/2/18 13:24:37

grep如何排除多个目录？

在使用 grep 进行文本搜索时&#xff0c;有时候需要排除多个目录&#xff0c;避免在这些目录下进行搜索。下面介绍几种不同的实现方式。 目录 1.使用 -r 和 --exclude-dir 选项&#xff08;GNU grep&#xff09; 2.使用扩展正则表达式和 -P 选项&#xff08;GNU grep&#x…...

编程日记 2025/2/18 13:21:31

Elasticsearch 数据建模：从原理到实战的降维打击指南

Elasticsearch 数据建模&#xff1a;从原理到实战的降维打击指南 &#x1f680; 第一章 数据建模的物理法则&#xff1a;倒排索引的奇妙世界 1.1 倒排索引&#xff1a;比字典更聪明的数据结构 当你在ES中存入"Hello World"时&#xff0c;背后发生了这些魔法&#…...

编程日记 2025/2/18 13:17:19

python defaultdict用法

摘要 使用 defaultdict 可以简化处理字典中缺失键的情况。以下是几个使用 defaultdict 的示例&#xff0c;展示了它在不同场景下的应用。 示例 1&#xff1a;分组文件 假设我们有一组文件名&#xff0c;想要根据文件扩展名将它们分组。我们可以使用 defaultdict 来实现这一点…...

编程日记 2025/2/18 13:14:15

苹果手机怎么把照片抠图？2026年最全解决方案对比

作为一个经常需要处理照片的博主&#xff0c;我深知抠图这件事有多频繁——无论是证件照换底色、商品图去背景&#xff0c;还是日常修图&#xff0c;抠图的需求总是接踵而至。今天我就把这两年用过的所有苹果手机抠图工具都整理出来&#xff0c;帮你找到最适合的那一个。苹果系…...

编程新知 2026/5/3 22:49:06

【数据驱动】基于神经网络温度控制的数据驱动控制附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和…...

编程新知 2026/5/3 21:42:16

用 AI 智能体自动写代码、自动测代码、自动部署，全程零手动操作

前言 以前写代码&#xff1a;自己构思→敲代码→本地调试→改 Bug→打包→传服务器→配置环境→上线部署&#xff0c;一套流程耗几小时。 现在AI Agent 智能体可以做到&#xff1a;你只说需求一句话&#xff0c;智能体自动&#xff1a;需求分析 → 生成完整代码 → 自动写单元…...

编程新知 2026/5/3 20:38:38

PyPI镜像失效、pip install卡死、torch.cuda.is_available()返回False？Python AI配置崩溃前的最后3分钟急救指南

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;PyPI镜像失效、pip install卡死、torch.cuda.is_available()返回False&#xff1f;Python AI配置崩溃前的最后3分钟急救指南 当 pip install 在下载 torch 时无限挂起&#xff0c;或 import torch; pri…...

编程新知 2026/5/3 17:16:33

低代码不是银弹，但内核决定生死：基于JDK17+GraalVM构建轻量级内核的6大硬性约束与3种裁剪方案（实测内存＜48MB）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;低代码平台内核的本质认知与边界界定 低代码平台的内核并非简单的可视化拖拽引擎&#xff0c;而是一套运行时抽象层与元数据驱动的执行框架。其本质是将业务逻辑、UI 布局、数据连接、权限策略等维度统…...

编程新知 2026/5/3 16:56:34

5大核心功能解锁英雄联盟Akari助手：你的专属游戏智能管家

5大核心功能解锁英雄联盟Akari助手&#xff1a;你的专属游戏智能管家 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄联盟游戏中的繁…...

编程新知 2026/5/3 16:54:34

使用 curl 命令快速测试 Taotoken 提供的多模型 API 接口

使用 curl 命令快速测试 Taotoken 提供的多模型 API 接口 1. 准备工作 在开始测试 Taotoken 的 API 接口之前&#xff0c;您需要准备好以下信息&#xff1a;登录 Taotoken 控制台获取有效的 API Key&#xff0c;并在模型广场查看可用的模型 ID。API Key 用于身份验证&#xf…...

编程新知 2026/5/3 15:32:03

别再只用T型曲线了！用Python给伺服电机做个S曲线加减速仿真（附完整代码）

用Python实现伺服电机S曲线加减速&#xff1a;从数学原理到工程实践 在工业自动化领域&#xff0c;伺服电机的运动控制算法直接影响着设备的精度、效率和寿命。传统的T型加减速算法虽然实现简单&#xff0c;但其速度突变带来的机械冲击问题一直困扰着工程师们。最近在机器人轨迹…...

编程新知 2026/5/3 11:20:22

3大秘籍彻底告别电脑噪音：FanControl风扇控制软件的完整静音方案

3大秘籍彻底告别电脑噪音&#xff1a;FanControl风扇控制软件的完整静音方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_T…...

编程新知 2026/5/3 11:18:20

给ESP32S3 NES模拟器换“皮肤”：手把手教你修改调色板解决SPI屏颜色错乱

ESP32S3 NES模拟器显示调校实战&#xff1a;从颜色错乱到完美呈现的深度解决方案 当8位像素风格的超级玛丽在ESP32S3驱动的SPI屏幕上跳跃时&#xff0c;本该鲜亮的红色工装裤却变成了诡异的蓝色&#xff0c;绿色水管泛着紫光——这种"抽象派"画风绝非怀旧游戏的本意。…...

编程新知 2026/5/3 11:16:20