前端 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(像素): 1、相对单位,代表屏幕上的一个基本单位,逻辑像素。 2、不会根据屏幕尺寸或分辨率自动调整大…...
OceanBase数据库产品与工具介绍
OceanBase:蚂蚁集团自主研发的分布式关系数据库 1、什么是 OceanBase? OceanBase 是由蚂蚁集团完全自主研发的企业级分布式关系数据库,始创于 2010 年。它具有以下核心特点: 数据强一致性:在分布式架构下确保数据强…...

学习threejs,对模型多个动画切换展示
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.AnimationMixer 动画…...

【Bug合集】——Java大小写引起传参失败,获取值为null的解决方案
阿华代码,不是逆风,就是我疯 你们的点赞收藏是我前进最大的动力!! 希望本文内容能够帮助到你!! 目录 一:本文面向的人群 二:错误场景引入 三:正确场景引入 四…...

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

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

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

ubuntu 16.04 中 VS2019 跨平台开发环境配置
su 是 “switch user” 的缩写,表示从当前用户切换到另一个用户。 sudo 是 “superuser do” 的缩写,意为“以超级用户身份执行”。 apt 是 “Advanced Package Tool” 的缩写,Ubuntu中用于软件包管理的命令行工具。 1、为 root 用户设置密码…...

C语言第13节:指针(3)
1. 回调函数 回调函数的基本思想是,将函数指针作为参数传递给另一个函数,并在需要时通过这个函数指针调用对应的函数。这种方式允许一个函数对执行的内容进行控制,而不需要知道具体的实现细节。 回调函数在以下场景中尤为有用: …...
java:简单小练习,面积
面积:圆和长方形 接口:实现面积 test:调用 一、interface: 对于接口,它是Java中一个新增的知识点,而C中没有,因为Java有一个缺陷就是不可以实现多继承,只可以单继承,这就限制了有些功能的使…...

@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格式的数据(包含提取list指定索引数据) ->>, ->, #>, #>> 在PostgreSQL中,处理json或jsonb类型数据时,->>, ->, #> 和 #>> 是非常有用的操作符,它们允许你以…...

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

go-zero(四) 错误处理(统一响应信息)
go-zero 错误处理(统一响应信息) 在实现注册逻辑时,尝试重复注册可能会返回 400 状态码,显然不符合正常设计思维。我们希望状态码为 200,并在响应中返回错误信息。 一、使用第三方库 1.下载库 目前 go-zero官方的…...
1.1 爬虫的一些知识(大模型提供语料)
1.1 爬虫的一些知识(大模型提供语料) 网页资源: 资源组织方式:列表分页,搜索引擎,推荐 发送请求的文档类型:html ,js 响应请求的文档类型:html,js,json 请求方式:同步和异步 页面形式…...

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的使用
先聊聊导入 看到这里的因该能够知道,官网以及网上绝大多数的方法都导入不进来,那么解决方法如下: 两个链接:按照顺序依次下载这两个tgz和zip,其中tgz为主要部分,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 为处理实时数据提供了一个统一、高吞吐、低延迟的平台,其持久化层本质上是一个“按照分布式事务日志架构的大规模发布/订阅消息队列”,这使它作为企业级基础设施来处理流式数据非常有价值。因此实现 Kafka 到 Kafka 的数据同步也成了一项重要…...
华为刷题笔记--题目索引
文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分: 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新,订阅防丢失 简单题目 –题目分值试卷1华为OD机…...

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

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...

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

遍历 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)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...

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

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