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

px、em 和 rem 的区别：深入理解 CSS 中的单位

news 2025/9/17 9:40:56

文章目录

    • 前言
    • 一、`px` - 像素 (Pixel)
    • 二、`em` - 相对父元素字体大小 (Ems)
    • 三、`rem` - 相对于根元素字体大小 (Root Ems)
    • 四、综合比较
    • 结语

前言

在CSS中，px、em和rem是三种用于定义尺寸（如宽度、高度、边距、填充等）的长度单位。它们各自有不同的特性，适用于不同的场景。接下来我们将更详细地探讨这三种单位。

一、px - 像素 (Pixel)

  • 定义：
    • px代表像素，是一个绝对单位，它的大小固定且与设备无关，通常表示屏幕上一个点的大小。
  • 计算方式：
    • 在大多数现代显示器上，1px等于屏幕上的一个物理像素点。然而，在高分辨率显示器（例如Retina显示屏）上，1px可能对应多个物理像素以保持视觉清晰度。
  • 适用场景：
    • 当你需要精确控制元素的尺寸或位置时，比如设计图标或需要对齐的图形元素。
    • 对于需要保证一致性的布局部分，如导航栏的高度或按钮的尺寸。
  • 使用方法：
    • 直接为属性赋值，无需考虑上下文环境的影响。
    /* 设置一个div的宽度为200像素 */
div {width: 200px;
}
  • 注意事项：
    • 使用px可能会限制页面的响应性和可访问性，因为用户无法通过浏览器设置轻松调整文本大小。
    • 在移动设备上，固定的px值可能不适合所有屏幕尺寸，影响用户体验。

二、em - 相对父元素字体大小 (Ems)

  • 定义：
    • em是一种相对单位，其值基于当前元素的字体大小。如果未特别指定，则默认为继承自父元素的字体大小。1em等于当前元素的字体大小。
  • 计算方式：
    • 如果一个元素没有明确指定字体大小，它会从最近的非静态定位的祖先元素继承字体大小。因此，em的值依赖于上下文环境中的字体大小设定。
  • 适用场景：
    • 适合创建可以随着父元素变化而自动调整的灵活布局。
    • 可以用作字体大小的单位，使整个文档树能够根据根元素的比例缩放。
  • 使用方法：
    • em的值是相对于直接父元素的字体大小。对于嵌套的元素，子元素的em值会累积，即子元素的尺寸是基于父元素的em值计算的。
    /* 如果html的字体大小是16px，默认情况下，下面的p标签将有32px的字体大小 */
p {font-size: 2em; /* 2 * 父元素的字体大小 */
}/* 子元素的em值会累积 */
.parent {font-size: 2em;
}
.parent .child {font-size: 1.5em; /* 1.5 * parent的字体大小 = 3em = 48px */
}
  • 注意事项：
    • 因为em是相对于父元素的字体大小，所以在嵌套结构中，每个子元素的em值都是基于其直接父元素的字体大小，这可能导致尺寸累积效应，增加计算复杂度。
    • 如果不注意，这种累积效应可能会导致难以预料的结果，特别是在深层次嵌套的情况下。

三、rem - 相对于根元素字体大小 (Root Ems)

  • 定义：
    • rem也是一种相对单位，但它不是相对于父元素，而是相对于HTML文档的根元素（即<html>标签）的字体大小。这意味着无论元素位于DOM树的哪个位置，rem的值都是一致的。
  • 计算方式：
    • 1rem等于HTML根元素的字体大小。如果未指定，则默认为浏览器的默认字体大小，通常是16px。
  • 使用场景：
    • 创建完全独立于任何特定父元素的响应式设计，确保所有元素按照相同的基准进行缩放。
    • 简化了复杂的嵌套结构中的尺寸管理问题，因为不需要考虑父元素的影响。
  • 使用方法：
    • rem的值是相对于根元素的字体大小。你可以通过改变根元素的字体大小来统一调整整个页面的尺寸。
    /* 设定根元素的字体大小 */
html {font-size: 62.5%; /* 默认16px -> 10px */
}/* 根据根元素字体大小设定其他元素 */
body {font-size: 1.4rem; /* 1.4 * 10px = 14px */
}h1 {font-size: 2.4rem; /* 2.4 * 10px = 24px */
}/* 修改根元素字体大小会影响所有rem单位 */
@media (min-width: 768px) {html {font-size: 75%; /* 新的1rem = 12px */}
}
  • 注意事项：
    • 要想让rem生效，最好是在全局样式表中设定根元素的字体大小。例如，可以通过html { font-size: 62.5%; }将默认字体大小设置为10px，使得后续的rem计算更加直观。
      在一些旧版本的浏览器中可能存在兼容性问题，但目前主流浏览器都已经支持rem。

四、综合比较

特性/单位pxemrem
类型绝对单位相对单位相对单位
参考点屏幕像素父元素字体大小根元素字体大小
适用场景需要精确控制的元素深层次嵌套结构全局响应式设计
优点精确、易于预测灵活、适应性强易维护、一致性好
缺点不利于响应式设计计算复杂、易出错可能需要额外配置

结语

选择哪种单位取决于你的具体需求以及你希望给用户提供的体验。对于那些追求像素级精度的设计师来说，px可能是最好的选择；而对于想要创建更加灵活和响应式的网页，em和rem则是更好的选项。特别是rem，由于其简化了尺寸管理，并且提供了良好的可访问性支持，因此在现代Web开发中越来越受欢迎。

相关文章：

px、em 和 rem 的区别：深入理解 CSS 中的单位

文章目录 前言一、px - 像素 (Pixel)二、em - 相对父元素字体大小 (Ems)三、rem - 相对于根元素字体大小 (Root Ems)四、综合比较结语 前言 在CSS中&#xff0c;px、em和rem是三种用于定义尺寸&#xff08;如宽度、高度、边距、填充等&#xff09;的长度单位。它们各自有不同的…...

编程日记 2025/1/17 2:24:47

基于STM32设计的粮食仓库(粮仓)环境监测系统

一、前言 1.1 项目开发背景 随着现代农业的发展和粮食储存规模的扩大&#xff0c;粮仓环境的智能化监控需求日益增长。传统的粮仓管理方式通常依赖人工检测和定期巡查&#xff0c;效率低下且容易出现疏漏&#xff0c;无法及时发现潜在问题&#xff0c;可能导致粮食受潮、霉变…...

编程日记 2025/1/17 2:22:43

【后端面试总结】tls中.crt和.key的关系

tls中.crt和.key的关系 引言 在现代网络通信中&#xff0c;特别是基于SSL/TLS协议的加密通信中&#xff0c;.crt和.key文件扮演着至关重要的角色。这两个文件分别代表了数字证书和私钥&#xff0c;是确保通信双方身份认证和数据传输安全性的基石。本文旨在深入探讨TLS中.crt和…...

编程日记 2025/1/17 2:16:34

日拱一卒（20）——leetcode学习记录：大小为 K 且平均值大于等于阈值的子数组数目

一、题目 给定数组&#xff0c;统计数组中长度为k的子数组且该子数组的平均值大于threshold的数量 二、思路 滑动窗思路&#xff0c;计算长度为k的滑动窗的平均值&#xff0c;关键点在于&#xff0c;每滑动一次&#xff0c;只需要去掉头增加尾&#xff0c;而不需要重新全部计…...

编程日记 2025/1/17 2:11:19

项目练习：若依管理系统字典功能-Vue前端部分

文章目录 一、情景说明二、若依Vue相关代码及配置1、utils代码2、components组件3、api接口代码4、Vuex配置5、main.js配置 三、使用方法1、html部分2、js部分 一、情景说明 我们在做web系统的时候&#xff0c;肯定会遇到一些常量选择场景。 比如&#xff0c;性别&#xff1a;…...

编程日记 2025/1/17 2:10:17

apache-skywalking-apm-10.1.0使用

apache-skywalking-apm-10.1.0使用 本文主要介绍如何使用apache-skywalking-apm-10.1.0&#xff0c;同时配合elasticsearch-8.17.0-windows-x86_64来作为存储 es持久化数据使用。 步骤如下&#xff1a; 一、下载elasticsearch-8.17.0-windows-x86_64 1、下载ES(elasticsear…...

编程日记 2025/1/17 2:08:15

计算机视觉算法实战——视频分析（Video Analysis）

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​​ ​​​​​​​​​​​​ ​​​​​ 视频分析是计算机视觉中的一个重要领域&#xff0c;旨在从视频数据中提取有用的信息&…...

编程日记 2025/1/17 2:07:12

全网首发：编译libssh，产生类似undefined reference to `EVP_aes_256_ctr@OPENSSL_1_1_0‘的大量错误

具体错误 前面和后面的&#xff1a; /opt/linux/x86-arm/aarch64-mix210-linux/host_bin/../lib/gcc/aarch64-linux-gnu/7.3.0/../../../../aarch64-linux-gnu/bin/ld: warning: libcrypto.so.1.1, needed by ../lib/libssh.so.4.10.1, not found (try using -rpath or -rpat…...

编程日记 2025/1/17 2:04:09

用python实战excel和word自动化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 python实现excel和word自动化--批量处理 前言--需求快要期末了需要&#xff0c;提交一个年级的学生成绩数据&#xff0c;也就是几百份。当前我们收集了一份excel表格&#xf…...

编程日记 2025/1/17 2:03:08

【云计算】OpenStack云计算平台

OpenStack云计算平台框架搭建 1.先换源 先换成阿里源： curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2.安装框架 yum -y install centos-release-openstack-train 3.安装客户端 yum -y install python-openstackclient 但…...

编程日记 2025/1/17 2:02:07

好用的php商城源码有哪些？

选择一个优秀的商城工具&#xff0c;能更好地帮助大家建立一个好用的商城系统。目前比较流行的都是开源PHP商城系统&#xff0c;那么现实中都有哪些好用的PHP商城源码值得推荐呢&#xff1f;下面就带大家一起来了解一下。 1.TigShop 【推荐指数】&#xff1a;★★★★★☆ 【推…...

编程日记 2025/1/17 2:01:05

docker安装Nginx UI

开源地址&#xff1a;nginx-ui/README-zh_CN.md at dev 0xJacky/nginx-ui GitHub docker run -dit \ --namenginx-ui \ --restartalways \ -e TZAsia/Shanghai \ -v /Users/xiaoping/docker/appdata/nginx:/etc/nginx \ -v /Users/xiaoping/docker/appdata/nginx-ui:/etc/ng…...

编程日记 2025/1/17 1:57:00

为深度学习创建PyTorch张量 - 最佳选项

为深度学习创建PyTorch张量 - 最佳选项 正如我们所看到的&#xff0c;PyTorch张量是torch.Tensor​ PyTorch类的实例。张量的抽象概念与PyTorch张量之间的区别在于&#xff0c;PyTorch张量为我们提供了一个可以在代码中操作的具体实现。 在上一篇文章中&#xff0c;我们看到了…...

编程日记 2025/1/17 1:52:54

详解数据增强中的平移shft操作

Shift 平移是指在数据增强&#xff08;data augmentation&#xff09;过程中&#xff0c;通过对输入图像或目标进行位置偏移&#xff08;平移&#xff09;&#xff0c;让目标在图像中呈现出不同的位置。Shift 平移的目的是增加训练数据的多样性&#xff0c;从而提高模型对目标在…...

编程日记 2025/1/17 1:50:52

CCLINKIE转ModbusTCP网关，助机器人“掀起”工业智能的“惊涛骇浪”

以下是一个稳联技术CCLINKIE转ModbusTCP网关&#xff08;WL-CCL-MTCP&#xff09;连接三菱PLC与机器人的配置案例&#xff1a;设备与软件准备设备&#xff1a;稳联技术WL-CCL-MTCP网关、三菱FX5UPLC、支持ModbusTCP协议的机器人、网线等。 稳联技术ModbusTCP转CCLINKIE网关&…...

编程日记 2025/1/17 1:48:50

类型安全与代码复用的C# 泛型

一、引言&#xff1a;泛型 ——C# 编程的神奇钥匙 在 C# 编程的广袤天地里&#xff0c;泛型宛如一把神奇钥匙&#xff0c;能够开启高效、灵活且安全的代码之门&#x1f6aa;。 想象一下&#xff0c;你是一位经验丰富的建筑师&#xff0c;要建造各种各样的房子&#x1f3e0;。…...

编程日记 2025/1/17 1:47:45

卷积神经05-GAN对抗神经网络

卷积神经05-GAN对抗神经网络 使用Python3.9CUDA11.8Pytorch实现一个CNN优化版的对抗神经网络 简单的GAN图片生成 CNN优化后的图片生成 优化模型代码对比 0-核心逻辑脉络 1&#xff09;Anacanda使用CUDAPytorch2&#xff09;使用本地MNIST进行手写图片训练3&#xff09;…...

编程日记 2025/1/17 1:46:39

vscode使用Marscode编程助手

下载 vscode 在插件里下载Marscode编程助手 插件完成 在这里点击安装&#xff0c;点击后这里出现AI编程插件。...

编程日记 2025/1/17 1:43:30

网络分析仪测试S参数

S参数的测试 一&#xff1a;S参数的定义 S参数&#xff08;Scattering Parameters&#xff0c;散射参数&#xff09;是一个表征器件在射频信号激励下的电气行为的工具&#xff0c;它以输入信号、输出信号为元素的矩阵来表现DUT的“传输”和“散射”效应&#xff0c;输入、输出…...

编程日记 2025/1/17 1:42:29

docker mysql5.7如何设置不区分大小写

环境 docker部署&#xff0c;镜像是5.7&#xff0c;操作系统是centos 操作方式 mysql 配置文件是放在 /etc/mysql/mysql.conf.d/mysqld.cnf&#xff0c; vim /etc/mysql/mysql.conf.d/mysqld.cnf lower_case_table_names1 重启mysql容器 验证 SHOW VARIABLES LIKE low…...

编程日记 2025/1/17 1:38:25

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/14 20:08:44

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/9/6 3:33:57

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/9/7 8:51:35

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/6/16 22:53:40

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/7/9 0:26:24

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/8/31 0:00:18

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/7/6 8:20:01

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/9/7 8:49:05

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/7/5 22:22:08