面试官: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 设计稿的宽度 */,
    },
  },
};

目录
相关文章
|
5月前
|
存储 算法 架构师
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案
|
8月前
|
Java 程序员 调度
Java 高级面试技巧:yield() 与 sleep() 方法的使用场景和区别
本文详细解析了 Java 中 `Thread` 类的 `yield()` 和 `sleep()` 方法,解释了它们的作用、区别及为什么是静态方法。`yield()` 让当前线程释放 CPU 时间片,给其他同等优先级线程运行机会,但不保证暂停;`sleep()` 则让线程进入休眠状态,指定时间后继续执行。两者都是静态方法,因为它们影响线程调度机制而非单一线程行为。这些知识点在面试中常被提及,掌握它们有助于更好地应对多线程编程问题。
342 9
|
8月前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
335 12
|
8月前
|
编译器 Android开发 开发者
Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
Lambda表达式和匿名函数都是Kotlin中强大的特性,帮助开发者编写简洁而高效的代码。理解它们的区别和适用场景,有助于选择最合适的方式来解决问题。希望本文的详细讲解和示例能够帮助你在Kotlin开发中更好地运用这些特性。
151 9
|
9月前
|
Java
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
今日分享的主题是如何区分&和&&的区别,提高自身面试的能力。主要分为以下四部分。 1、自我面试经历 2、&amp和&amp&amp的不同之处 3、&对&&的不同用回答逻辑解释 4、彩蛋
|
10月前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
222 14
|
9月前
|
Java 关系型数据库 数据库
京东面试:聊聊Spring事务?Spring事务的10种失效场景?加入型传播和嵌套型传播有什么区别?
45岁老架构师尼恩分享了Spring事务的核心知识点,包括事务的两种管理方式(编程式和声明式)、@Transactional注解的五大属性(transactionManager、propagation、isolation、timeout、readOnly、rollbackFor)、事务的七种传播行为、事务隔离级别及其与数据库隔离级别的关系,以及Spring事务的10种失效场景。尼恩还强调了面试中如何给出高质量答案,推荐阅读《尼恩Java面试宝典PDF》以提升面试表现。更多技术资料可在公众号【技术自由圈】获取。
|
10月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
11月前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
2388 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
10月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?