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

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

news 2026/5/13 17:51:40

在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

基于 4SAPI 的企业文档智能处理系统：效率提升 20 倍，信息提取准确率 95%

前言 在数字化转型的今天&#xff0c;企业积累了海量的非结构化文档数据&#xff0c;包括合同、财务报表、技术手册、产品说明书、会议纪要、法律文件等。这些文档中蕴含着企业最核心的知识和资产&#xff0c;但传统的人工文档处理模式已经成为企业数字化的最大瓶颈&#xff1…...

编程新知 2026/5/13 16:01:31

卸载软件后右键菜单残留？用PowerShell精准清理注册表（附一键备份脚本）

彻底告别右键菜单残留&#xff1a;PowerShell注册表清理实战指南 刚卸载完某款压缩软件&#xff0c;却发现右键菜单里依然顽固地留着它的选项——这种经历恐怕不少Windows用户都遇到过。上周帮同事处理电脑时&#xff0c;就遇到了一个典型案例&#xff1a;卸载"可牛压缩&q…...

编程新知 2026/5/13 15:22:35

静态前端项目实战：从营销页到现代化门户的架构与实现

1. 项目概述&#xff1a;一个纯粹的静态前端项目最近在GitHub上看到了一个名为“Vibe Code”的项目&#xff0c;它的README写得非常漂亮&#xff0c;充满了各种炫酷的特性介绍&#xff0c;比如支持Claude Code、OpenAI Codex等AI编程助手&#xff0c;还有深色/亮色主题切换、多…...

编程新知 2026/5/13 14:51:33

企业AI成本为什么总是失控？Token计量与费用归因体系设计

一、问题背景随着企业大规模接入大模型能力&#xff0c;一个普遍现象正在浮现&#xff1a;AI成本正在失控。月初预算批了10万&#xff0c;月底账单来了20万。问财务&#xff1a;钱花哪了&#xff1f;财务说&#xff1a;只知道总额&#xff0c;不知道细节。问IT&#xff1a;哪个…...

编程新知 2026/5/13 14:43:07

SAP ABAP BADI AC_DOCUMENT：跨越VF01/MIRO/AFAB的智能凭证替代实战

1. 为什么需要AC_DOCUMENT BADI&#xff1f; 在SAP标准业务流程中&#xff0c;GGB1提供的凭证替代功能已经能满足大部分常规需求。但实际业务往往更复杂——比如销售开票时&#xff0c;需要根据付款条件动态替换税科目&#xff1b;发票校验时&#xff0c;要根据供应商信息自动填…...

编程新知 2026/5/13 13:35:45

基于reflectt-node的WebSocket RPC实践：构建实时协作待办应用

1. 项目概述与核心价值 最近在折腾一个需要实时双向通信的Web应用&#xff0c;传统的轮询和长轮询方案在性能和资源消耗上总感觉差那么点意思。后来把目光投向了WebSocket&#xff0c;但原生WebSocket的API相对底层&#xff0c;自己管理连接、心跳、重连、消息序列化这些琐事&a…...

编程新知 2026/5/13 13:30:39

MemOS：为AI智能体构建统一记忆操作系统，提升长期对话与RAG性能

1. 项目概述&#xff1a;MemOS&#xff0c;为AI智能体装上“记忆大脑” 如果你正在开发基于大语言模型的AI智能体&#xff0c;或者在使用RAG&#xff08;检索增强生成&#xff09;技术&#xff0c;那么你一定遇到过这个核心痛点&#xff1a; 对话上下文太短&#xff0c;智能体…...

编程新知 2026/5/13 13:19:34

终极指南：使用dmg2img免费快速转换苹果DMG镜像文件

终极指南&#xff1a;使用dmg2img免费快速转换苹果DMG镜像文件 【免费下载链接】dmg2img DMG2IMG allows you to convert a (compressed) Apple Disk Images (imported from http://vu1tur.eu.org/dmg2img). Note: the master branch contains imported code, but lacks bugfix…...

编程新知 2026/5/13 13:11:26

2025_NIPS_Unveiling Induction Heads: Provable Training Dynamics and Feature Learning in Transformers

文章核心内容与创新点总结 核心内容 本文聚焦Transformer在n元马尔可夫链数据上的上下文学习（ICL）机制，通过分析含相对位置嵌入、多头softmax注意力和归一化前馈网络的双层Transformer训练动态，证明梯度流会收敛到实现“广义归纳头”（GIH）机制的极限模型。该模型中，第…...

编程新知 2026/5/13 10:05:15

STM32F103C8T6驱动MAX30102：从CubeMX配置到心率可视化，一个LED灯带你看懂心跳

STM32F103C8T6驱动MAX30102&#xff1a;从硬件交互到心跳可视化实战 当你第一次看到LED灯随着自己的心跳节奏闪烁时&#xff0c;那种将生物信号转化为物理反馈的奇妙体验&#xff0c;正是嵌入式开发的魅力所在。本文将带你用STM32F103C8T6和MAX30102血氧传感器&#xff0c;打造…...

编程新知 2026/5/13 9:24:31