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

前端 px、rpx、em、rem、vh、vw计量单位的区别

目录

一、px

二、rpx

三、em

四、rem

五、vh和vw

六、rpx 和 px之间的区别

七、px 与 rem 的区别


一、px

px(像素):

1、相对单位,代表屏幕上的一个基本单位,逻辑像素。
2、不会根据屏幕尺寸或分辨率自动调整大小。
3、在高分辨率屏幕上可能显得很小。

二、rpx

rpx(微信小程序单位):

1、主要用于微信小程序开发。
2、是相对单位,基于屏幕宽度进行缩放。
3、可以在不同设备上保持一致的布局。

三、em

‌em(element em)‌是相对于父元素的字体大小的单位如果父元素的字体大小为16px,则1em等于16px使用em单位时,元素的大小会随着父元素的字体大小的改变而变化。em单位适用于嵌套元素,特别是需要根据父元素的字体大小进行调整的情况。然而,em单位可能会受到任何继承的父元素字体大小的影响,这有时会导致布局的不确定性‌。

于 em 的的知识:
1、通常情况下,用户的浏览器默认渲染的文字大小是 16px。
2、用户可以通过重新定义根标签(或者父元素标签)的 font-size 属性来重新定义默认的文字大小
3、在响应式布局中,页面中的所有元素都使用额 em 单位值,em 是一个相对的大小,默认情况下 1em=16px
4、相对的大小计算的的参考物是指元素父元素的 font-size 的属性
5、比如一个在<div>设置字体大小为 16px,此时这个<div>的后代元素就基层了他的字体大小
6、font-size 属性具有继承性

em的运用

html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此时height等于16px */
}
.box-1 { 
    font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */ 
    height: 1em; /* 此时实际height等于10px */
}

四、rem

rem (root em)是一个相对单位,类似于em,em是父元素字体大小

不同的是rem的基准是相对于html元素的字体大小

比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px

rem的运用

html {
   font-size: 12px; /* 根html 为 12px */
}

div {
    font-size: 2rem; /* 此时 div 的字体大小就是 24px */       
}

rem的优势

父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小

设置字体推荐使用rem,尽量不用用px或em。

五、vh和vw

vh(视口高度)和vw(视口宽度):
1、vh和vw是相对于视口的高度和宽度的单位。
2、1vh等于视口高度的1%,1vw等于视口宽度的1%。
3、这些单位非常适合响应式设计,因为它们让元素根据屏幕大小自动调整大小。

这里是视窗指的是浏览器内部的可视区域大小,即 window.innerWidth/window.innerHeight 大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

六、rpx 和 px之间的区别

1、在普通网页开发中,最常用的像素单位是px
2、在小程序开发中,推荐使用 rpx 这种响应式的像素单位进行开发

七、px 与 rem 的区别

1、px 对于只需要适配少量设备,且分辨率对页面影响不大的,使用 px 即可, px 设置更为精准。
2、随着 rem 在众多的浏览器都得到支持,有需要考虑到对多设备,多分辨率的自适应,无疑这时候 rem 是最合适的(如:移动端的开发)。

相关文章:

前端 px、rpx、em、rem、vh、vw计量单位的区别

目录 一、px 二、rpx 三、em 四、rem 五、vh和vw 六、rpx 和 px之间的区别 七、px 与 rem 的区别 一、px px&#xff08;像素&#xff09;&#xff1a; 1、相对单位&#xff0c;代表屏幕上的一个基本单位&#xff0c;逻辑像素。 2、不会根据屏幕尺寸或分辨率自动调整大…...

OceanBase数据库产品与工具介绍

OceanBase&#xff1a;蚂蚁集团自主研发的分布式关系数据库 1、什么是 OceanBase&#xff1f; OceanBase 是由蚂蚁集团完全自主研发的企业级分布式关系数据库&#xff0c;始创于 2010 年。它具有以下核心特点&#xff1a; 数据强一致性&#xff1a;在分布式架构下确保数据强…...

学习threejs,对模型多个动画切换展示

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.AnimationMixer 动画…...

【Bug合集】——Java大小写引起传参失败,获取值为null的解决方案

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;本文面向的人群 二&#xff1a;错误场景引入 三&#xff1a;正确场景引入 四&#xf…...

Python爬虫:如何从1688阿里巴巴获取公司信息

在当今的数字化时代&#xff0c;数据已成为企业决策和市场分析的重要资产。对于市场研究人员和企业分析师来说&#xff0c;能够快速获取和分析大量数据至关重要。阿里巴巴的1688.com作为中国最大的B2B电子商务平台之一&#xff0c;拥有海量的企业档案和产品信息。本文将介绍如何…...

单片机学习笔记 2. LED灯闪烁

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯 目录 0、实现的功能 1、Keil工程 2、代码实现 0、实现的功能 LED灯闪烁 1、Keil工程 闪烁原理&#xff1a;需要进行软件延时达到人眼能分辨出来的效果。常用的延时方法有软件延时和定时器延时。此次先进行软…...

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析 1. 前言2. 光腔模型3. 光腔衰荡过程4. 衰荡时间与反射率的关系5. 测量步骤①. 光腔调节&#xff1a;②. 光腔衰荡测量&#xff1a;③. 计算衰荡时间常数&#xff1a;④. 反射率计算&#xff1a; 6. 实际应用中的调整7. 技术优…...

ubuntu 16.04 中 VS2019 跨平台开发环境配置

su 是 “switch user” 的缩写&#xff0c;表示从当前用户切换到另一个用户。 sudo 是 “superuser do” 的缩写&#xff0c;意为“以超级用户身份执行”。 apt 是 “Advanced Package Tool” 的缩写&#xff0c;Ubuntu中用于软件包管理的命令行工具。 1、为 root 用户设置密码…...

C语言第13节:指针(3)

1. 回调函数 回调函数的基本思想是&#xff0c;将函数指针作为参数传递给另一个函数&#xff0c;并在需要时通过这个函数指针调用对应的函数。这种方式允许一个函数对执行的内容进行控制&#xff0c;而不需要知道具体的实现细节。 回调函数在以下场景中尤为有用&#xff1a; …...

java:简单小练习,面积

面积&#xff1a;圆和长方形 接口&#xff1a;实现面积 test:调用 一、interface: 对于接口&#xff0c;它是Java中一个新增的知识点&#xff0c;而C中没有&#xff0c;因为Java有一个缺陷就是不可以实现多继承&#xff0c;只可以单继承&#xff0c;这就限制了有些功能的使…...

@Autowired 和 @Resource思考(注入redisTemplate时发现一些奇怪的现象)

1. 前置知识 Configuration public class RedisConfig {Beanpublic RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {RedisTemplate<String, Object> template new RedisTemplate<>();template.setConnectionFactory(facto…...

PostgreSQL提取JSON格式的数据(包含提取list指定索引数据)

PostgreSQL提取JSON格式的数据&#xff08;包含提取list指定索引数据&#xff09; ->>, ->, #>, #>> 在PostgreSQL中&#xff0c;处理json或jsonb类型数据时&#xff0c;->>, ->, #> 和 #>> 是非常有用的操作符&#xff0c;它们允许你以…...

如何利用谷歌浏览器提高网络安全

在当今数字化时代&#xff0c;网络安全已成为我们不可忽视的重要议题。作为全球最受欢迎的网络浏览器之一&#xff0c;谷歌浏览器不仅提供了快速、便捷的浏览体验&#xff0c;还内置了多种安全功能来保护用户的在线安全。本文将详细介绍如何通过谷歌浏览器提高您的网络安全&…...

go-zero(四) 错误处理(统一响应信息)

go-zero 错误处理&#xff08;统一响应信息&#xff09; 在实现注册逻辑时&#xff0c;尝试重复注册可能会返回 400 状态码&#xff0c;显然不符合正常设计思维。我们希望状态码为 200&#xff0c;并在响应中返回错误信息。 一、使用第三方库 1.下载库 目前 go-zero官方的…...

1.1 爬虫的一些知识(大模型提供语料)

1.1 爬虫的一些知识&#xff08;大模型提供语料&#xff09; 网页资源&#xff1a; 资源组织方式&#xff1a;列表分页,搜索引擎&#xff0c;推荐 发送请求的文档类型&#xff1a;html ,js 响应请求的文档类型&#xff1a;html,js,json 请求方式&#xff1a;同步和异步 页面形式…...

Linux开发工具:Vim 与 gcc,打造高效编程的魔法双剑

文章目录 一、初识Vim模式 二、vim基本操作2.1基础操作2.2命令模式/正常模式2.2.1光标定位2.2.2复制粘贴、删除2.2.3撤销2.2.4替换字符2.2.5替换模式 2.3底行模式2.3.1退出vim和**保存文件**2.3.2定位文本字符串2.3.3命令2.3.4实现分屏2.3.5替换指定字符串 2.4补充指令2.4.1视图…...

cesium for unity的使用

先聊聊导入 看到这里的因该能够知道&#xff0c;官网以及网上绝大多数的方法都导入不进来&#xff0c;那么解决方法如下: 两个链接&#xff1a;按照顺序依次下载这两个tgz和zip&#xff0c;其中tgz为主要部分&#xff0c;zip为示例工程项目 如果您要查看示例工程项目的话&am…...

Android AOSP 架构和各层次开发内容介绍

一、系统架构总况​​​​ 官方文档:架构概览 | Android Open Source Project (google.cn)https://source.android.google.cn/docs/core/architecture?hl=zh-cn 下面是Google Android 提供的最新架构层次图: 图. AOSP 的软件堆栈层次 System API 表示仅供合作伙伴和 OEM…...

Kafka 到 Kafka 数据同步

简述 Kafka 为处理实时数据提供了一个统一、高吞吐、低延迟的平台&#xff0c;其持久化层本质上是一个“按照分布式事务日志架构的大规模发布/订阅消息队列”&#xff0c;这使它作为企业级基础设施来处理流式数据非常有价值。因此实现 Kafka 到 Kafka 的数据同步也成了一项重要…...

华为刷题笔记--题目索引

文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分&#xff1a; 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新&#xff0c;订阅防丢失 简单题目 –题目分值试卷1华为OD机…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...