面试官:px、em、rem、vw、rpx 之间有什么区别?

简介: 面试官:px、em、rem、vw、rpx 之间有什么区别?

面试官:px、em、rem、vw、rpx 之间有什么区别?

单位名称 说明 web 小程序
px 绝对单位。代表像素数量 支持 支持
em 相对单位。相对于父元素的字体大小 支持 支持
rem 相对单位。相对于页面根标签 html 的字体大小 支持 不支持
vw 相对单位。相对于视口的宽度大小 100vw 等于视口的宽度 支持 支持
rpx 相对单位。 小程序中独有 , 750rpx 等于视口的宽度 不支持 支持

屏幕适配的原理

做移动端布局时,希望页面可以做到用户的手机屏幕越大、看见的页面元素就越大。因此,只能使用相对长度单位。

实际开发中,rem、vw、rpx 是我们比较常用的相对长度单位。

而使用它们的核心思想,就在于要搞懂

设计稿!!! 大小是 375px !!!

  1. 换算的比例
1rem 等于 多少 px  设计稿
1vw 等于 多少 px 设计稿
1rpx 等于多少 px 设计稿

  1. 或者是和屏幕宽度的对应关系
多少 rem 等于屏幕的宽度
多少 vw 等于屏幕的宽度
多少 rpx 等于屏幕的宽度

  1. 在搞清楚以上信息后,后续只要在不同的换算工具中代入以上的比例关系即可
    ]K](8L_AGADL[71[GZ$Y{4C.png

普通项目中使用

原生的 html、css、JavaScript 直接运行的项目

直接在 vscode 中安装对应的插件即可

rem

需要引入外部 js 来动态处理 html 的字体大小 如 flexible.js

)AX{1RXJ[KG9(KTZO6({NL7.png


settings.json

"cssrem.rootFontSize": 10 /* 10  10rem=屏幕的宽度   */

vw

RO144[T}{34P(%9(}YTCA3X.png


settings.json

"px2vw.width": 750 /* 设计稿的宽度 */

rpx

{O@4ET]`Y[)NNZ)L(Y}YT}7.png


setting.json

"px-to-rpx.baseWidth": 375,/* 设计稿的宽度 */

基于 webpack 的项目使用

基于 webpack 打包的前端项目

webpack 有工具, 可以写 px, 自动转 rem youzan.github.io/vant/#/zh-C…

rem

  1. 安装 lib-flexible
yarn add lib-flexible   postcss-pxtorem@^5.1.1

  1. 引入 main.js
import "lib-flexible";

  1. 观察 10rem = 屏幕的宽度
    OF%66$EOCE~X{7$0UN9A_3M.png
  2. postcss.config.js 中 编辑
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      /*  在设计稿的宽度下 1rem = 多少px 37.5     10rem=屏幕的宽度   */
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

vw

  1. 安装依赖
yarn add postcss-px-to-viewport

  1. postcss.config.js 中配置
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 100 /* 100 设计稿的宽度 */,
    },
  },
};

目录
相关文章
|
3月前
|
Android开发 Kotlin
Android经典面试题之Kotlin的==和===有什么区别?
本文介绍了 Kotlin 中 `==` 和 `===` 操作符的区别:`==` 用于比较值是否相等,而 `===` 用于检查对象身份。对于基本类型,两者行为相似;对于对象引用,`==` 比较值相等性,`===` 检查引用是否指向同一实例。此外,还列举了其他常用比较操作符及其应用场景。
193 93
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
2月前
|
编译器
经典面试题:变量的声明和定义有什么区别
在编程领域,变量的“声明”与“定义”是经典面试题之一。声明告诉编译器一个变量的存在,但不分配内存,通常包含变量类型和名称;而定义则为变量分配内存空间,一个变量必须至少被定义一次。简而言之,声明是告知变量形式,定义则是实际创建变量并准备使用。
|
2月前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
156 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
3月前
|
Java 关系型数据库 MySQL
面试官:GROUP BY和DISTINCT有什么区别?
面试官:GROUP BY和DISTINCT有什么区别?
97 0
面试官:GROUP BY和DISTINCT有什么区别?
【多线程面试题十】、说一说notify()、notifyAll()的区别
notify()唤醒单个等待对象锁的线程,而notifyAll()唤醒所有等待该对象锁的线程,使它们进入就绪队列竞争锁。
|
4月前
|
算法 Java
【多线程面试题十八】、说一说Java中乐观锁和悲观锁的区别
这篇文章讨论了Java中的乐观锁和悲观锁的区别,其中悲观锁假设最坏情况并在访问数据时上锁,如通过`synchronized`或`Lock`接口实现;而乐观锁则在更新数据时检查是否被其他线程修改,适用于多读场景,并常通过CAS操作实现,如Java并发包`java.util.concurrent`中的类。
|
4月前
|
Java
【多线程面试题十三】、说一说synchronized与Lock的区别
这篇文章讨论了Java中`synchronized`和`Lock`接口在多线程编程中的区别,包括它们在实现、使用、锁的释放、超时设置、锁状态查询以及锁的属性等方面的不同点。
【多线程面试题九】、说一说sleep()和wait()的区别
sleep()和wait()的主要区别在于sleep()是Thread类的静态方法,可以在任何地方使用且不会释放锁;而wait()是Object类的方法,只能在同步方法或同步代码块中使用,并会释放锁直到相应线程通过notify()/notifyAll()重新获取锁。
|
4月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。