当前位置: 首页 > 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机…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...