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

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

news 2025/11/1 5:36:03

在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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/10/28 17:51:39

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/10/30 1:30:44

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/10/27 2:41:32

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/10/29 6:01:54

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/10/30 22:37:27

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/10/19 12:57:19

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/10/29 23:15:58

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/10/25 0:08:23