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

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

news 文章来源：https://blog.csdn.net/m0_62877814/article/details/129046676 2025/4/21 3:43:59

在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

怎么通过中级职称有窍门吗？

中级职称评审对人才加薪、升职自然不必说&#xff0c;更重要的是职称证书对于公司和企业同样具有重要的价值和意义&#xff0c;因此只要是说公司办理资质或者有项目招投标的公司对于人才参加中级职称评审毫无疑问会给予大力支持&#xff0c;既然工程师职称有这么多的好处&#…...

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

SAP ABAP根据事务码查找增强最直接的方法

下面是为任意事务代码查找用户出口的步骤&#xff1a; 方法一&#xff1a; 第 1 步&#xff1a;使用 事务代码&#xff1a;SE93。输入您要搜索用户出口的 事务代码。 在我们的场景中&#xff0c;我们将使用 CO11N。 第 2 步&#xff1a;点击显示&#xff1a; 第 3 步&#xf…...

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

HTTP协议——详细讲解

目录 一、HTTP协议 1.http 2.url url的组成&#xff1a; url的保留字符&#xff1a; 3.http协议格式​编辑 ①http request ②http response 4.对request做出响应 5.GET与POST方法 ①GET ②POST 7.HTTP常见Header ①Content-Type:: 数据类型(text/html等)在上文…...

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

echonet-dynamic代码解读

1 综述 一共是这些代码&#xff0c;我们主要看echo.py&#xff0c;segmentation.py&#xff0c;video.py&#xff0c;config.py。 2 配置文件config.py 基于配置文件设置路径。 """Sets paths based on configuration files."""import conf…...

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

大气温室气体浓度不断增加，导致气候变暖加剧，随之会引发一系列气象、生态和环境灾害怎样解决？

大气温室气体浓度不断增加&#xff0c;导致气候变暖加剧&#xff0c;随之会引发一系列气象、生态和环境灾害。如何降低温室气体浓度和应对气候变化已成为全球关注的焦点。海洋是地球上最大的“碳库”,“蓝碳”即海洋活动以及海洋生物&#xff08;特别是红树林、盐沼和海草&…...

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

字符串内存分配

涉及三块区域&#xff1a;栈&#xff0c;堆&#xff0c;字符串常量池&#xff08;jdk1.7之前在方法区&#xff0c;jdk1.7之后在堆中&#xff09; 关于字符串常量池到底在不在堆中&#xff1a; jdk1.6及以前&#xff0c;方法区独立存在&#xff08;不在堆里面&#xff09;&…...

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

CHI协议通道概念

通道定义为一组结点之间的通信信号。CHI协议定义了四种通道&#xff0c;请求REQ、响应RSP、侦听SNP和数据DAT。 RN结点上CHI协议通道信号组包括&#xff1a; 请求发送端信号&#xff0c;RN结点发送读/写等请求&#xff0c;从不接收请求响应接收端信号&#xff0c;RN结点接收来…...

编程日记 2023/2/15 19:18:59

XQuery 简介

XQuery 简介 解释 XQuery 最佳方式是这样讲&#xff1a;XQuery 相对于 XML 的关系&#xff0c;等同于 SQL 相对于数据库表的关系。 XQuery 被设计用来查询 XML 数据 - 不仅仅限于 XML 文件&#xff0c;还包括任何可以 XML 形态呈现的数据&#xff0c;包括数据库。 您应该具备的…...

编程日记 2023/2/15 19:17:53

Spring的Bean的生命周期与自动注入细节

1. Bean的生命周期 通过一个LifeCycleBean和一个MyBeanPostProcessor来观察Bean的生命周期: 构造(实例化)->依赖注入(前后处理)->初始化(前后处理)->销毁 LifeCycleBean Component public class LifeCycleBean {private static final Logger log LoggerFactory.g…...

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

谷粒商城：订单中心概念解析

1、订单中心 电商系统涉及到 3 流&#xff0c;分别时信息流&#xff0c;资金流&#xff0c;物流&#xff0c;而订单系统作为中枢将三者有机的集 合起来。 订单模块是电商系统的枢纽&#xff0c;在订单这个环节上需求获取多个模块的数据和信息&#xff0c;同时对这 些信息进行加…...

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