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

rem、px、em的区别 -前端

news 2026/4/2 5:31:53

文章目录

  • 三者的区别
  • 特点与换算
  • 举例
    • em
    • rem
  • 总结一
  • 总结二

三者的区别

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：

em相对于父元素；rem相对于根元素；px是相当于设备的像素点，相对于设备的长度单位

特点与换算

  1. 浏览器默认的字号是16px，因此如果没有设置根节点html的字号，这将会是一个默认基数。

  2. rem 与 px 的换算为 px = rem * 设置的根节点字号。

1.设置了根节点 html 字体大小
html{font-size:12px}
div{width:4rem;}
//div 的宽度换算为 px 为 4rem*12px = 48px2.没有设置根节点 html 字体大小
div{width:4rem;}
//div 的宽度换算为 px 为 4rem*16px = 64px
  1. 注意，html 字体大小最小为 12px；如果设置为10px，则换算后的 px 依然按照 12px 计算
3.设置根节点 html 字体大小小于12px
html{font-size:10px}
div{width:4rem;}
//div 的宽度换算为 px 为 4rem*12px = 48px

举例

em

  1. 子元素字体大小的em是相对于父元素字体大小

  2. 元素的width/height/padding/margin用em的话是相对于该元素的font-size

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-size: 40px;width: 7.5em;  /* 300px */height: 7.5em;background-color: gray;}p {font-size: 0.5em; /* 20px */width: 7.5em;     /* 150px */height: 7.5em;color: blue;background-color: tan;margin: 0;}span {font-size: 0.5em;width: 7em;height: 6em;background-color: #fff;display: block;color: red;}</style>
</head><body><div>父元素div<p>子元素p<span>孙元素span</span></p></div>
</body></html>

父元素：

子元素：

孙元素：

rem

rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html {font-size: 10px;}div {font-size: 4rem;  /* 40px */width: 20rem;     /* 200px */height: 20rem;color: black;background-color: darkcyan;}p {font-size: 2rem;  /* 20px */width: 10rem;height: 10rem;color: blue;background-color: purple;margin: 0;}span {font-size: 1.5rem;width: 7rem;height: 6rem;display: block;color: red;background-color: sandybrown;}</style>
</head><body><div>父元素div<p>子元素p<span>孙元素span</span></p></div>
</body></html>

父元素：

子元素：

孙元素：

总结一

在做项目的时候用什么单位长度取决于你的需求，我一般是这样的：

1、像素（px）：用于元素的边框或定位。

2、em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素的父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。

总结二

1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

2、em 单位基于使用他们的元素的字体大小。

3、rem 单位基于 html 元素的字体大小。

4、em 单位可能受任何继承的父元素字体大小影响

5、rem 单位可以从浏览器字体设置中继承字体大小。

6、使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

7、在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

8、使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

9、媒体查询中使用 rem 单位

10、不要在多列布局中使用 em 或 rem -改用 %。

11、不要使用em或 rem，如果缩放会不可避免地导致要打破布局元素。

需要注意的是：

样式的reset中需先设置html字体的初始化大小为50px，这是为了防止js被禁用或者加载不到或者执行错误。

而做的兼容样式的reset中需先设置body字体的初始化大小为16px，这是为了让body内的字体大小不继承父级html元素的50px，而用系统默认的16px

参考文章地址：
参考链接1
参考链接2

相关文章：

rem、px、em的区别 -前端

文章目录 三者的区别特点与换算举例emrem 总结一总结二 三者的区别 在css中单位长度用的最多的是px、em、rem&#xff0c;这三个的区别是&#xff1a; 一、px是固定的像素&#xff0c;一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对于px更具有灵活性&#xff0c;…...

编程日记 2023/5/13 15:58:40

分享几款小白从零开始学习的会用到的工具/网站

大二狗接触编程也有两年了&#xff0c;差生文具多这大众都认可的一句话&#xff0c;在这里蹭一下这个活动分享一下从0开始学习编程有啥好用的工具 目录 伴侣一、Snipaste截图工具 伴侣二、Postman软件&#xff08;可用ApiPost平替&#xff09; 伴侣三、字体图标网站 伴侣四…...

编程日记 2023/5/29 17:14:38

第八章 文件处理命令

第八章 文件处理命令 一、 文本编辑器 vi • vi 是 Unix 类操作系统中最为流行的文本编辑器。尽管目前 已有 gedit 等一些工作在图形界面下使用起来也更为方便 的文本编辑器&#xff0c;但在很多情况下&#xff0c;vi 这种专为字符界面操 作而设计的编辑器恐怕还是要充当首…...

编程日记 2023/5/13 15:48:38

LVS 负载均衡群集的 NAT 模式和 DR 模式

1. 对比 LVS 负载均衡群集的 NAT 模式和 DR 模式&#xff0c;比较其各自的优势 DR 模式 * 负载各节点服务器通过本地网络连接&#xff0c;不需要建立专用的IP隧道 原理&#xff1a;首先负载均衡器接收到客户的请求数据包时&#xff0c;根据调度算法决定将请求发送给哪个后端的…...

编程日记 2023/5/13 15:43:37

自学自动化测试，第一份工作就18K，因为掌握了这些技术

我个人的情况是有1年自动化测试工作经验半年的实习经验&#xff0c;2020年毕业&#xff0c;专业通信工程&#xff0c;大一的时候学过C语言&#xff0c;所以一直对于编程感兴趣&#xff0c;之所以毕业后没做通信的工作&#xff0c;通信行业的朋友应该都明白&#xff0c;通信的天…...

编程日记 2023/5/13 15:38:36

C++ 类的继承与派生

目录 1、继承的概念 2、继承&#xff08;Inherit&#xff09; 3、继承方式 4、父子同名成员并存 5、虚函数&#xff08;virtual&#xff09; 6、纯虚函数 1、继承的概念 以李白为例 类1是类2的基类&#xff08;父类&#xff09;&#xff0c;类2是类3的基类&#xff08;父类…...

编程日记 2023/5/13 15:33:35

分布式系统基础理论

CAP是分布式系统方向中的一个非常重要的理论&#xff0c;可以粗略的将它看成是分布式系统的起点&#xff0c;CAP分别代表的是分布式系统中的三种性质&#xff0c;分别是Consistency&#xff08;可用性&#xff09;、Availability&#xff08;一致性&#xff09;、Partition tol…...

编程日记 2023/5/13 15:28:34

HttpServletRequestWrapper的使用与原理

​ 介绍 HttpServletRequestWrapper 实现了 HttpServletRequest 接口&#xff0c;可以让开发人员很方便的改造发送给 Servlet 的请求.HttpServletRequest 对参数值的获取实际调的是org.apache.catalina.connector.Request没有提供对应的set方法修改属性所以不能对前端传来的参…...

编程日记 2023/5/13 15:23:33

PBDB Data Service：List of fossil occurrences（化石产出记录列表）

List of fossil occurrences&#xff08;化石产出记录列表&#xff09; 描述用法参数选择PBDB所有记录&#xff08;all_records&#xff09;以下参数可用于按各种条件查询化石产出记录以下参数可用于筛选所选内容以下参数还可用于根据分类筛选结果列表以下参数可用于生成数据存…...

编程日记 2023/5/13 15:18:32

初识C语言

1. 初识C语言 C语言是一门通用计算机编程语言&#xff0c;广泛应用于底层开发。 C语言是一门面向过程的计算机编程语言&#xff0c;它与C,Java等面向对象的编程语言有所不同。 第一个C语言程序&#xff1a; #include<stdio.h>int main(void) {printf("hello worl…...

编程日记 2023/5/31 5:16:21

Leetcode 322. 零钱兑换（完全背包）

Leetcode 322. 零钱兑换&#xff08;完全背包&#xff09;题目 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&…...

编程日记 2023/5/13 15:08:30

怎么恢复回收站？分享4个宝藏方法！

案例&#xff1a;怎么恢复回收站 【请问大家怎么恢复误删的文件呀&#xff1f;如果回收站被清空了&#xff0c;又应该怎么恢复呢&#xff1f;】 电脑回收站是我们存储被删除文件的地方。但是有时候&#xff0c;我们会不小心把一些重要的文件或者照片误删了。这时候&#xff0…...

编程日记 2023/5/13 15:03:29

大模型混战，最先实现“智慧涌现”的会是谁？

作者 | 曾响铃 文 | 响铃说 几秒钟写出了一篇欢迎词&#xff1b; 小说人物乱入现实&#xff0c;快速创作不重样的故事&#xff1b; 鼠标一点&#xff0c;一封英文工作沟通邮件撰写完成&#xff1b; 准确解出数学应用题&#xff0c;还给出解题步骤&#xff1b; 甚至还能理…...

编程日记 2023/5/13 14:58:28

Powerlink协议在嵌入式linux上的移植和主从站通信(电脑和linux板通信实验)

使用最新的openPOWERLINK 2.7.2源码&#xff0c;业余时间搞定了Powerlink协议在嵌入式linux上的移植和测试&#xff0c;并进行了下电脑和linux开发板之间的通信实验。添加了一个节点配置&#xff0c;跑通了源码中提供的主站和从站的两个demo。这里总结下移植过程分享给有需要的…...

编程日记 2023/5/13 14:53:27

快速理解基本的cookie、session 和 redis

一、Cookie 1、什么是Cookie 1、Cookie实际上是一小段的文本信息&#xff0c;是一种keyvalue形式的字符串。客户端请求服务器&#xff0c;如果服务器需要记录该用户状态&#xff0c;就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。 2、当浏览器再请求…...

编程日记 2023/5/13 14:48:25

STANet代码复现出现的问题

1 IndexError: boolean index did not match indexed array along dimension 0; dimension is 4194304 but corresponding boolean dimension is 65536定位到导致错误的代码&#xff0c;是metric.py&#xff0c;Collect values for Confusion Matrix 收集混淆矩阵的值时出错 …...

编程日记 2023/5/13 14:43:24

Java 中String对象详解

Java语言中的String对象是一个非常常见的数据类型&#xff0c;大多数情况下我们都是在使用String对象来表示字符串类型的数据。Java中的String类是一个final class&#xff0c;它是不可被继承的。本文将对Java中的String对象进行详细全面的描述&#xff0c;包括以下几个方面&am…...

编程日记 2023/5/13 14:38:24

k8s nfs运行问题、etcd问题、calico网络问题

服务器重启后nfs运行问题导致服务不能正常重启 解决办法 在每个节点下使用如下命令进行查看nfs是否正常启动 systemctl status nfs 如果没有启动&#xff0c;则使用如下命令启动&#xff0c;保证三个节点下的nfs都正常启动 systemctl start nfs 再次查看nfs是否正常启动 syst…...

编程日记 2023/5/13 14:33:22

Qt--QString字符串类、QTimer定时器类

目录 1. QString 字符串类 dialog.cpp 2. 容器类 2.1 顺序容器 QList 示例代码&#xff1a; student.h student.cpp dialog.h dialog.cpp 运行结果&#xff1a; 2.2 关联容器 QMap 示例代码&#xff1a; dialog.h dialog.cpp 运行结果&#xff1a; 3. Qt类型 3.1 跨平台数据类型…...

编程日记 2023/5/13 14:28:21

2023.5.13＞＞Eclipse+exe4j打包Java项目及获取exe所在文件的路径

Eclipseexe4j打包Java项目及获取exe所在文件的路径 1、打包exe文件1.1 打jar包1.2 打包exe2、在程序中获取exe所在路径3、遇到问题4、JDK version和class file version(Class编译版本号)对应关系5、参考文章 1、打包exe文件 1.1 打jar包 右单击项目选择“Export…” 1.2…...

编程日记 2023/5/13 14:23:20

90% 的代码交给 AI 后，人还剩什么本事？

问题定义、架构决策、结果取舍。 Cognition AI 及其研发的智能体 Devin 如何重塑软件工程的未来。作者指出&#xff0c;AI 已经能够接管 90% 的底层执行工作&#xff0c;包括编写代码和修复漏洞&#xff0c;使人类工程师从琐碎的实现细节中解放出来。在这一范式转变下&#xff…...

编程新知 2026/4/2 4:19:15

seo 站群的优缺点是什么

SEO 站群的优缺点解析 在现代的互联网营销中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;站群是一个重要的概念。SEO 站群是指由多个主题相关的网站组成的集合&#xff0c;这些网站通过某种联系形式运作在一起&#xff0c;以提升整体的搜索引擎排名和流量。虽然 SEO …...

编程新知 2026/4/2 4:09:11

ChatGPT+RMBG-2.0：智能图像处理工作流自动化

ChatGPTRMBG-2.0&#xff1a;智能图像处理工作流自动化 1. 当你还在手动抠图时&#xff0c;有人已经用一句话完成整套流程 上周帮朋友处理一批电商产品图&#xff0c;他花了整整两天时间在Photoshop里一张张抠背景、调边缘、换底色。最后发来消息说&#xff1a;“要是能对着图…...

编程新知 2026/4/2 4:03:07

Z-Image-GGUF惊艳效果：运动模糊、景深虚化、镜头畸变等摄影级效果模拟

Z-Image-GGUF惊艳效果&#xff1a;运动模糊、景深虚化、镜头畸变等摄影级效果模拟 1. 项目简介&#xff1a;当AI学会“拍照” 想象一下&#xff0c;你告诉AI&#xff1a;“给我一张黄昏时分&#xff0c;一个女孩在樱花树下奔跑的照片&#xff0c;要有那种风吹过发丝的动感&am…...

编程新知 2026/4/2 3:34:03

杭州污水提升泵靠谱厂家

在杭州及周边地区进行地下室改造、商业空间建设或解决特殊排污需求时&#xff0c;选择一家技术可靠、服务专业的污水提升泵厂家至关重要。在众多厂家中&#xff0c;杭州富阳赛特仪表阀门有限公司&#xff08;赛斯瑞特&#xff09; 凭借其深厚的技术积淀、过硬的产品品质和完善的…...

编程新知 2026/4/2 3:23:31

精选 Skills 推荐：10 个让 Coding Agent 如虎添翼的Skills + 优质来源分享

精选 Skills 推荐&#xff1a;10 个让 Coding Agent 如虎添翼的Skills 优质来源分享 本篇是 Vibecoding 系列教程 的工具导向专题篇。 前篇&#xff1a;进阶教程&#xff08;一&#xff09;&#xff1a;MCP Skills 让 coding agent 有自己的工具系列合集&#xff1a;Vibecodi…...

编程新知 2026/4/2 3:21:31

Agent在零售行业能解决哪些痛点？——深度解析零售企业智能自动化转型路径

在2026年零售行业加速迈向智能化的背景下&#xff0c;AI Agent&#xff08;人工智能智能体&#xff09;已不再仅仅是技术实验室的产物&#xff0c;而是演变为重构行业价值链的核心驱动力。传统的零售运营长期受困于人力密集型模式&#xff0c;面临着全球化运营复杂度高、数据孤…...

编程新知 2026/4/2 0:43:28

R语言实战：利用compareGroups包高效生成临床研究三线表(Table1)

1. 为什么临床研究离不开Table1三线表 在医学论文和临床研究报告中&#xff0c;Table1三线表几乎是标配。我第一次投稿时&#xff0c;审稿人直接指出"缺少规范的基线特征表"&#xff0c;这才意识到这个表格的重要性。Table1的核心作用是展示研究人群的基线特征&#…...

编程新知 2026/4/1 16:00:32

GDBFrontend表达式求值器深度解析：多窗口实时变量监控技巧

GDBFrontend表达式求值器深度解析&#xff1a;多窗口实时变量监控技巧 【免费下载链接】gdb-frontend ☕ GDBFrontend is an easy, flexible and extensible gui debugger. Try it on https://debugme.dev 项目地址: https://gitcode.com/gh_mirrors/gd/gdb-frontend GD…...

编程新知 2026/4/1 13:51:23

D3KeyHelper：暗黑3效率提升工具的全方位应用指南

D3KeyHelper&#xff1a;暗黑3效率提升工具的全方位应用指南 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper D3KeyHelper是一款开源的暗黑3鼠标宏工具…...

编程新知 2026/4/1 12:58:29