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

rem、px、em的区别 -前端

news 文章来源：https://blog.csdn.net/qq_40968685/article/details/130642471 2025/5/4 19:21:36

文章目录

  • 三者的区别
  • 特点与换算
  • 举例
    • 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

Centos系统的使用基本教程

Centos是一款流行的Linux操作系统&#xff0c;它基于Red Hat Enterprise Linux系统&#xff0c;是一款稳定、可靠、安全的操作系统。本文将介绍Centos系统的基本使用方法&#xff0c;包括安装、命令行操作、软件安装和系统管理等方面的内容。 安装Centos系统 Centos系统可以从…...

编程日记 2023/5/13 14:18:19

IDEA生成ER图、UML类图、时序图、流程图等的插件推荐或独立工具推荐

以下是几个常用的IDEA插件和独立工具&#xff0c;可以用于生成ER图、UML类图、时序图、流程图等&#xff1a; Visual Paradigm (独立工具) Visual Paradigm是一个强大的建模工具&#xff0c;可以生成UML类图、时序图、流程图等。它支持多种语言和框架&#xff0c;包括Java、Spr…...

编程日记 2023/5/13 14:13:18

Python心经（3）

这一节总结点demo和常用知识点 目录 有关字符串格式化打印的 lambda匿名函数&#xff0c;&#xff0c;将匿名函数作为参数传入 文件读写 生成器 python的装饰器 简单的网站代码&#xff1a; 有关三元运算 推导式&#xff1a; 新浪面试题&#xff1a; 有关面向对象里…...

编程日记 2023/5/13 14:08:17

单工，半双工，全双工通讯

对于点对点之间的通信&#xff0c;按照消息传送的方向与时间关系&#xff0c;通信方式可分为单工通信、半双工通信及全双工通信三种。 单工通信 单工通信&#xff08;Simplex Communication&#xff09;是指消息只能单方向传输的工作方式。 在单工通信中&#xff0c;通信的信…...

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

【2023-05-09】 设计模式（单例，工厂）

2023-05-09 设计模式&#xff08;单例&#xff0c;工厂&#xff09; 单例模式 顾名思义&#xff0c;就是整个系统对外提供的实例有且只有一个 特点&#xff1a; ​ 1、单例类只有一个实例 ​ 2、必须是自己创建唯一实例 ​ 3、必须给所以对象提供这个实例 分类&#xff…...

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

批量任务导致页面卡死解决方案

需求背景 需要基于高德地图展示海量点位&#xff08;大概几万个&#xff09;&#xff0c;点位样式要自定义&#xff08;创建DOM&#xff09;&#xff0c;虽然使用了聚合点&#xff0c;但初始化时仍需要将几万个点位的DOM结构都创建出来。 这里补充一句&#xff0c;高德地图在2.…...

编程日记 2023/5/30 16:28:01

避免“文献综抄”，5种写作结构助你完成文献综述→

很多作者可能有过这样的体验&#xff1a;读了很多文献&#xff0c;但在写综述的时候总感觉不像是在写文献综述&#xff0c;更像在写文献总结 如果引用方面不注意&#xff0c;甚至会成为文献综抄。 那么&#xff0c;你可以参考下我们整理的以下资料哦~ 01 文献总结和文献综述的…...

编程日记 2023/5/13 13:48:12

Java异常和反射

JAVA 异常分类及处理 概念 } final Entry<K,V> getEntryUsingComparator(Object key) { K k (K) key; // 获取该 TreeMap 的 comparator Comparator<? super K> cpr comparator; if (cpr ! null) { // 从根节点开始 Entry<K,V> p …...

编程日记 2023/6/1 5:42:55

Accesss数据库的那点事

Accesss数据库的那点事 1.Access的简介 Access&#xff08;全称为Microsoft Access&#xff09;是一个关系型数据库管理系统&#xff08;RDBMS&#xff09;。它是由微软公司开发的数据库软件&#xff0c;用于创建、管理和操作数据库应用程序。 Access提供了一个可视化的开发环…...

编程日记 2023/5/13 13:38:09

网络基础学习：osi网络七层模型

osi网络七层模型 什么是OSI&#xff0c;什么是ISO?为什么ISO要提出OSI网络七层模型&#xff1f;OSI七层的划分以及具体内容第七层 应用层第六层 表示层第五层 会话层第四层 传输层第三层 网络层第二层 数据链路层第一层 物理层 每一层与设备的对应关系 什么是OSI&#xff0c;什…...

编程日记 2023/5/13 13:33:08