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

em,rem,px,rpx,vw,vh的区别与使用

news 2026/2/7 13:28:29

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

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。rem是CSS3新增的一个相对单位（root em，根em）

三、em是相对于其父元素的字体大小来设置的，一般都是以的“font-size”为基准。这样就会存在一个问题，如果我想对某个特定的元素的进行字体大小设置，那么他所有的子元素都会以他为基础，就会导致整个页面内元素所占比例与UI定稿不一样。而rem是相对于html根元素的“font-size”为基准，这样就意味着，我们只需要在根元素确定一个参考值。(如果还想让字体为16px,直接通配符先设置16px,html再设置10px即可)

注：任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px，1rem=16px

em:

    <style>.father{           width: 300px;height: 300px;background-color: aqua;}.child{font-size: 10px;//father1和child一样大，重新规定font-size为10，//所以1em=10px,em继承父元素，渲染时他会从自身向外找，自己有就用自己//的font-size标准，没有再用最近的父元素的，默认最顶层是html是1em=16pxwidth: 30em;height: 30em;background-color: blue;}</style><body><div class="father"><div class="child"></div></div>
</body>

rem:

 <style>html{font-size: 10px;}//child2和child3都是30px,只会继承根元素html，默认是1rem=16px.child2{font-size: 50px; width: 3rem;height: 3rem;}.child3{width: 3rem;height: 3rem;}</style><body><div class="child2"></div><div  class="child3"></div>
</body>

使用场景:

rem的使用场景：一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕，就必须使用相对单位，这时候使用rem是最好的选择。

我们将UI设计稿人为均分成几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其html根元素的字号大小设置为均分后的每一等份的大小。

如：UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询，给320px的屏幕设置HTML根元素的字号大小为16px（320/20）,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候，ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width：5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的四1/4的宽度。

简便方法：

我们在使用rem时，每一个元素的大小都将从设计稿的px转换为rem相对单位，非常麻烦。遇到不能整除的数值还会导致最后页面数值的不精确，在这种情况下我们，可以使用淘宝开发的flexible.js插件，配合开发工具vs code的cssrem插件，可避免做媒体查询与数值的转换。（前者避免媒体查询，后者避免做数值转换）

rpx： 是微信小程序独有的，是小程序中使用的相对单位，可以根据屏幕宽度进行自适应，不论屏幕大小。用法和rem类似。

rpx与px之间的换算，以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx=0.5px=1物理像素

在css3中vw与vh: vw单位可以根据窗口的宽度自动改变大小，“1vw”是窗口宽度的“1%”；vh单位可以根据窗口的高度自动改变大小，“1vh”是窗口高度的“1%”，和px，rem等类似，属于长度单位

vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。

推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比

vmin：取当前Vw和Vh中较小的那一个值

vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px 。

相关文章：

em,rem,px,rpx,vw,vh的区别与使用

在css中单位长度用的最多的是px、em、rem&#xff0c;这三个的区别是&#xff1a;一、px是固定的像素&#xff0c;一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性&#xff0c;他们是相对长度单位&#xff0c;意思是长度不是定死了的&#xff0c;更适…...

编程日记 2023/2/15 19:47:40

Vue+node.js医院预约挂号信息管理系统vscode

网上预约挂号系统将会是今后医院发展的主要趋势。 前端技术&#xff1a;nodejsvueelementui,视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正…...

编程日记 2023/2/15 19:46:34

Java真的不难（五十四）RabbitMQ的入门及使用

RabbitMQ的入门及使用 一、什么是RabbitMQ&#xff1f; MQ全称为Message Queue&#xff0c;即消息队列。消息队列是在消息的传输过程中保存消息的容器。它是典型的&#xff1a;生产者、消费者模型。生产者不断向消息队列中生产消息&#xff0c;消费者不断的从队列中获取消息。…...

编程日记 2023/2/15 19:45:28

Unity | Script Hot Reload

官网地址&#xff1a;https://hotreload.net/ 一、作用 Unity在运行时&#xff0c;可以直接修改代码&#xff0c;避免等待过长的编译时间。 二、说明 1、支持的平台&#xff1f; Windows、MacOS、Linux 2、支持的Unity版本&#xff1f; 2018.4 (LTS)2019.4 (LTS)2020.3 (L…...

编程日记 2023/2/15 19:44:22

3｜射频识别技术｜第五讲：数据通信和编码技术｜第九章：编码与调制｜重点理解掌握传输介质中的有线传输介质

计算机网络部分&#xff1a;https://blog.csdn.net/m0_57656758/article/details/128943949传输介质分为有线传输介质和无线传输介质两大类&#xff1b;有线传输介质通常包含双绞线、同轴电缆和光导纤维&#xff1b;无线传输介质包含微波、红外线等。传输介质的选择和连接是网络…...

编程日记 2023/2/15 19:43:16

【遇见青山】基于Redis的Feed流实现案例

【遇见青山】基于Redis的Feed流实现案例1.关注推送2.具体代码实现1.关注推送 关注推送也叫做Feed流&#xff0c;直译为投喂。为用户持续的提供"沉浸式”的体验&#xff0c;通过无限下拉刷新获取新的信息。 Feed流产品有两种常见模式&#xff1a; 这里我们实现基本的TimeL…...

编程日记 2023/2/15 19:42:09

【芯片前端】一文搞定|寄存器组织生成与uvm ral_model环境全流程

前言 本文以组织一个系统（或模块）寄存器为例，进行寄存器与ral生成相关的全流程展示。内容包括如下几个部分： 寄存器文档组织 描述文件与辅助RTL代码结构 ralf/ral/rtl文件代码结构 UVM RAL访问环境组织 寄存器文档组织 在windows路径下组织寄存器文档，格式为excel表格。…...

编程日记 2023/2/15 19:41:02

Leetcode力扣秋招刷题路-0061

从0开始的秋招刷题路&#xff0c;记录下所刷每道题的题解&#xff0c;帮助自己回顾总结 61. 旋转链表 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&…...

编程日记 2023/2/15 19:39:56

xilinx srio ip学习笔记之axistream接口

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 xilinx srio ip学习笔记之axistream接口前言接口转化前言 srio 的IQ接口都是基于axistream的&#xff0c;以前没怎么用过axistream的接口&#xff0c;或者说没怎么用过复杂条…...

编程日记 2023/2/15 19:38:48

轨迹误差评估指标[APE/RPE]和EVO

轨迹误差评估指标[APE/RPE]和EVO1. ATE/APE2. RPE3. EVO3.1 评估指标3.2 使用3.2.1 轨迹可视化3.2.2 APE3.2.3 RPEReference: 高翔&#xff0c;张涛 《视觉SLAM十四讲》视觉SLAM基础&#xff1a;算法精度评价指标&#xff08;ATE、RPE&#xff09; 在实际工程中&#xff0c;我…...

编程日记 2023/2/15 19:37:41

uni-app 消息推送功能UniPush

uni-app 消息推送功能UniPush,这里用的是uni-app自带的UniPush1.0&#xff08;个推服务&#xff09;&#xff0c;所以只针对UniPush1.0介绍实现步骤。 建议查阅的文章&#xff1a; UniPush 1.0 使用指南[2] Unipush 常见问题[3] 当然现在已经出了UniPush2.0&#xff08;HBuilde…...

编程日记 2023/2/15 19:36:34

面试题(二十六)场景应用

1. 场景应用 1.1 微信红包相关问题 参考答案 概况&#xff1a;2014年微信红包使用数据库硬抗整个流量&#xff0c;2015年使用cache抗流量。 微信的金额什么时候算&#xff1f; 微信红包的金额是拆的时候实时算出来&#xff0c;不是预先分配的&#xff0c;采用的是纯内存计…...

编程日记 2023/2/15 19:35:25

密码技术在车联网安全中的应用与挑战

随着智慧交通和无人驾驶的快速发展&#xff0c;车联网产业呈现蓬勃发展态势&#xff0c;车与云、车与车、车与路、车与人等综合网络链接的融合程度越来越高&#xff0c;随之而来的安全挑战也更加严峻。解决车联网的安全问题需要一个整体的防护体系&#xff0c;而密码技术凭借技…...

编程日记 2023/2/15 19:34:19

富媒体数据管理解决方案：简化、优化、自动化

富媒体数据管理解决方案&#xff1a;简化、优化、自动化 适用于富媒体的 NetApp 解决方案有助于简化和降低数据管理成本&#xff0c;优化全球媒体工作流并自动执行媒体资产管理。这将有助于减轻您的负担。 为什么选择 NetApp 的富媒体数据管理解决方案&#xff1f; 成本更低…...

编程日记 2023/2/15 19:33:12

QT入门Input Widgets之QFontComboBox、QTextEdit、QPlainTextEdit、QDial、QKeySequenceEdit

目录 一、QFontComboBox的相关介绍 1、实际使用 二、QTextEdit与QPlainTextEdit 三、QDial的相关介绍 四、QKeySequenceEdit的相关介绍 此文为作者原创&#xff0c;创作不易&#xff0c;转载请标明出处&#xff01; 一、QFontComboBox的相关介绍 1、实际使用 一般使用较…...

编程日记 2023/2/15 19:32:06

Java企业级开发学习笔记

文章目录一、Spring1.1、Slay Dragon1.2、RescueDamselQuest一、Spring 第一周写了两个小项目均使用了原始调用和容器的方法 两个项目&#xff1a;<斩杀大龙与上路保卫战> 配一张文件位置图 1.1、Slay Dragon BraveKnight package net.sherry.spring.day01;public c…...

编程日记 2023/2/15 19:31:02

【算法基础】(一)基础算法 ---高精度

✨个人主页&#xff1a;bit me ✨当前专栏&#xff1a;算法基础 &#x1f525;专栏简介&#xff1a;该专栏主要更新一些基础算法题&#xff0c;有参加蓝桥杯等算法题竞赛或者正在刷题的铁汁们可以关注一下&#xff0c;互相监督打卡学习 &#x1f339; &#x1f339; &#x1f3…...

编程日记 2023/2/15 19:29:55

电源口防雷器电路设计方案

电源口防雷电路的设计需要注意的因素较多&#xff0c;有如下几方面&#xff1a;1、防雷电路的设计应满足规定的防护等级要求&#xff0c;且防雷电路的残压水平应能够保护后级电路免受损坏。2、在遇到雷电暂态过电压作用时&#xff0c;保护装置应具有足够快的动作响应速度&#…...

编程日记 2023/2/15 19:28:51

【零基础入门前端系列】—表单（七）

【零基础入门前端系列】—表单&#xff08;七&#xff09; 一、什么是表单 表单在Web网页中用来给访问者填写信息&#xff0c;从而采集客户信息端&#xff0c;使得网页具有交互功能。一般是将表单设计在一个HTML文档中&#xff0c;当用户填写完信息后做提交操作&#xff0c;于…...

编程日记 2023/2/15 19:27:45

Linux安装python3

Linux安装python3一.介绍二.下载三.配置1.文件夹2.安装依赖3.安装4.配置4.1python关系4.2配置测试-映射python3文件4.2.1 不用设置默认python3为默认版本4.2.2 将python3设置默认版本一.介绍 因为我的Centos7虚拟机里面只有python2.7.5&#xff0c;我想安装一个python3但是还要…...

编程日记 2023/2/15 19:26:40

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/1/31 18:36:21

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2026/1/23 2:04:44

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51