面试官：说一下 px、em、rem、vw/vh？em和rem的区别？

原创 已于 2023-09-02 12:12:19 修改 · 1.5k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端

于 2023-09-02 12:06:01 首次发布
本文详细解释了CSS中的像素单位（如px、设备像素、逻辑像素和CSS像素），介绍了DPR和PPI的概念，以及响应式设计中的rem单位、媒体查询和viewport单位vw/vh的运用，探讨了rem的阶梯性问题和网页视口尺寸计算。

关于PX

CSS中有非常多的长度单位

整体可以分成两类： 

绝对长度单位（Absolute length units）； 

相对长度单位（Relative length units）；

px（绝对长度单位）

像素是影响显示的基本单位。（比如屏幕上看到的画面、一幅图片）；

pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel；

 “像素”表示“画像元素”之意，有时亦被称为pel（picture element）；

我们经常说一个电脑的分辨率、手机的分辨率，还有CSS当中的像素又是什么关系呢？

像素单位常见的有三种像素名称：

  • 设备像素（也称之为物理像素）； 
  • 设备独立像素（也称之为逻辑像素）；
  • CSS像素；

设备像素，也叫物理像素。

  • 设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；
  • 我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小；
  • 比如iPhone X的分辨率 1125x2436，指的就是设备像素；

设备独立像素，也叫逻辑像素。

  • 如果面向开发者，使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的；
  • 开发者针对不同的屏幕很难进行较好的适配，编写程序必须了解用户的分辨率来进行开发；
  • 所以在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念；
  • 比如你购买了一台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么无论你购买的是2k、4k的显示器，对于开发者来说，都是 1920x1080的大小。

CSS像素

  • CSS中我们经常使用的单位也是pixel，它在默认情况下等同于设备独立像素（也就是逻辑像素）；
  • 逻辑像素面向开发者；

我们可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率：

DPR：device pixel ratio

2010年，iPhone4问世，不仅仅带来了移动互联网，还带来了Retina屏幕；

Retina屏幕翻译为视网膜显示屏，可以为用户带来更好的显示；

在Retina屏幕中，一个逻辑像素在长度上对应两个物理像素，这个比例称之为设备像素比（device pixel ratio）；

可以通过window.devicePixelRatio获取到当前屏幕上的DPR值；

PPI：每英寸像素（英语：Pixels Per Inch，缩写：PPI）

通常用来表示一个打印图像或者显示器上像素的密度；

1英寸=2.54厘米，在工业领域被广泛应用；

问题考点——响应式

1.rem是什么？

em是一个相对长度单位，相对于父元素

rem也是一个相对长度单位，相对于根元素，常用于响应式布局

（rem：r’是“root”的缩写，相对于根元素<html>的字体大小。）

rem与其他长度单位的区别

  • px，绝对长度单位，最常用
  • em，相对长度单位，相对于父元素，不常用（相对于父元素，各个元素的父元素不一，没有统一标准）
  • rem，相对长度单位，相对于根元素，常用于响应式布局

2.响应式布局（移动端适配）的常用方案

  • media-query，根据不同的屏幕宽度设置根元素font-size
  • rem，基于根元素的相对单位

然后使用rem设置 总体字体大小 和 div1的宽度

在iphone6/7/8机型上（html {font-size: 100px;}）可以看到，

div1盒子的字号为16px（0.16×100=16px）

宽度为100px（1×100=100px）

iPhone也一样，宽度为375px

在iphone6/7/8 Plus机型上（html {font-size: 110px;}）

div1盒子的字号为17.6px（0.16×110=17.6px）

宽度为110px（1×110=110px）

接着就可以对任何元素的属性实现响应式，比如：line-height行高、padding内边距、margin外边距……

3.rem的弊端——“阶梯”性

有弊端，但还是能用

“阶梯”性 —— 在某一阶梯的整个跨度中无变化。

如果想要实现，376px比375px大一点？或者413px比375px大？（需要产生变化）

4.网页视口尺寸

  • window.screen.height      //屏幕宽度（手机点亮屏幕）
  • window.innerHeight          //网页视口高度（浏览器去除头尾，可以显示内容的部分）
  • document.body.clientHeight        //body高度（内容高度）

如图，667是window.screen.height；553是window.innerHeight；内容高度为浏览器头部底到红色矩形底

模拟器没有头和底部工具栏，与实际不同。

document.body.clientHeight为内容高度（随网页内容变化）

5.vw/vh

  • vh网页视口高度（window.innerHeight）的1/100
  • vw网页视口宽度（window.innerHeight）的1/100
  • vmax取两者最大值，vmin取两者最小值

把手机上能显示网页的区域的高度与宽度平均分成100份，1个vh/vw就是1份。——“阶梯”性就没有了。

10vw/10vh就是网页视口的宽度/高度 百分之十 即 十分之一 

vmax取vw和vh的最大值（变成正方形）

再看看vmin

等式

2023年最新前端各系列面试题及答案
欢迎来到瑆箫博客，专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等，助你掌握新技术，优化技能，激发编程热情。
07-18 983
我们的目标是做最全最好最有质量前端面试仓库，用心收录大厂面试题，高频面试题，知识点面试题，用心做好每一道题值得参考的题解
微信小程序面试题
qq_56630531的博客
01-03 3669
1. 简述微信小程序的运行机制 热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。 2. 分析一下小程序的优劣势 优势 无需下载，通过搜索和扫一扫就可以打开 良好的用户体验：打开速度快 开发成本比App要低 安卓上可以添加到桌面，与原生App差不多 为用户提供良好的安全保障。 劣势： 限制较多。 样式
rem em rpx px vw的区别
专注
12-31 934
在前端开发中，rememrpxpx和vw是常用的单位，它们各自的用途和计算方式不同，适用于不同的场景。
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2785
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
说说 em/px/rem/vh/vw 区别
MINX_minx的博客
11-16 520
em/px/rem/vh/vw 都属于 css 的单位
em/px/rem/vh/vw 的区别？
徐三岁的博客
06-05 413
px表示像素，所谓像素就是呈现在显示器上的一个个小点，每个像素点都是大小等同的，所以像素为绝对长度单位。在移动端中存在设备像素比，px实际显示的大小是不确定，之所以认为px为绝对单位，在于px的大小和元素的其他属性无关em是相对长度单位。相对于当前对象内文本的字体大小。如果当前对象内没有设置，则相对于浏览器的默认字体尺寸（1em = 16px）为了简化 font-size 的换算，可以在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10p
em、px、rem、vh、vw 的区别
preoccupied_的博客
03-17 613
px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算vw、vh：主要用于页面视口大小布局，在页面布局上更加方便简单。
前端面试题：px, em, rem, vw, vh 的区别解析
在面试中，面试官常常会考察候选人对px、em、rem、vw和vh等单位的理解与应用。以下是对这些单位的详细解释： ### 1. px (像素) **像素**是屏幕上的最小可寻址单元，通常用于精确控制元素大小。px 是一个绝对单位，...
03-px-em-rem-vw-vh-区别.md
03-31
面试官通常会期待应聘者能够清晰地表达出各种长度单位的适用场景、优势与局限性，甚至能够提供一些最佳实践的例子。这就要求应聘者必须对这些基本概念有透彻的理解和实际的运用经验。只有这样，才能在实际工作中做到...
前端面试必备：单位转换与适配技巧详解
在前端面试中，面试官通常会考察候选人的基础知识和技术理解深度。以下是几个关键的Web知识点，这些内容可能会出现在前端面试中： 1. **CSS单位选择**: - `rem`, `em`, `vw`, `vh` 是CSS中的相对单位。`rem` 是相...
说说em/px/rem/vh/vw区别?
weixin_62063529的博客
02-14 189
em/px/rem/vh/vw区别
7、em/px/rem/vh/vw区别？
weixin_43929206的博客
11-27 361
css中单位的解释；
面试官：说说em/px/rem/vh/vw的区别?
m0_50125215的博客
04-28 712
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、p.
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px、rpx、em、rem 、vw/vh、百分比的区别？
u012174809的专栏
12-30 1725
px：绝对长度单位，来描述一个元素的宽高以及定位信息 rpx：微信小程序独有的、解决屏幕自适应的尺寸单位 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。 rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大.
CSS中px/rem/em/vw/vh 的区别
大大大鸡腿的博客
08-04 796
1
px，em，rem，vw，vh之间的区别
Mxy18851251178的博客
01-07 605
例如：现在在你电脑上一个字为16px，大小正好，可能到比你分辨率要高的电脑上，字体16px大小不变，但是分辨率有变化，导致字体在别的电脑上可能会导致不适配的情况发生。四，vw（视窗宽度单位）：vw是相对于视窗宽度的百分比单位，1vw等于视窗宽度的1%。例如：这个就很好理解，就是1em就是父元素的一整个字体大小，当然，嵌套的多了容易搞混，尽量不要在嵌套多个元素的时候使用em，个人认为不太好用。五，vh（视窗高度单位）：vh类似于vw，不同之处在于它是相对于视窗高度的百分比单位，1vh等于视窗高度的1%。
px、em、rem,vw区别介绍
qq_48763502的博客
12-31 1090
单位类型相对关系使用场景px绝对单位不受任何因素影响，固定的像素值。精确控制尺寸，图像、按钮等em相对单位相对于当前元素的字体大小。字体、间距的相对设置rem根相对单位相对于根元素 () 的字体大小。响应式设计，全局布局vw视口单位相对于视口宽度的百分比。响应式布局，动态调整px 是最直观和固定的单位，适用于精确的设计。em 和 rem 都是相对单位，但 rem 与根元素的字体大小绑定，避免了层级嵌套的复杂性。
rem和vw的分析比较
前端啤酒屋
10-15 6826
rem： 首先rem是css单位，相比于px固定的像素单位，rem是相对像素单位，更加的灵活。 需求存在： 现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。 一、基本原理： 我们在页面中写rem，由于rem是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。 Rem原理举例： 设计稿宽度：x px 移动设备宽度：y px Html中font-size...
分布说说em/px/rem/vh/vw使用场景和区别，详细说明
最新发布
06-24
### em、px、rem、vh、vw 在前端开发中的使用场景及区别 在前端开发中，CSS 单位的选择直接影响页面布局的灵活性和响应式设计的效果。以下是 `em`、`px`、`rem`、`vh` 和 `vw` 的详细说明及其使用场景： #### 1. **PX（像素）** - **特点**：绝对单位，表示屏幕上的一个物理像素点。 - **是否响应式**：否。 - **典型应用场景**： - 固定尺寸的元素，如边框宽度、图标大小等[^1]。 - 需要精确控制尺寸时，例如按钮的固定高度或宽度[^4]。 - **优点**：简单直观，适用于不需要随视口变化的场景。 - **缺点**：缺乏灵活性，不适应不同设备屏幕尺寸。 ```css .button { width: 100px; /* 固定宽度 */ height: 30px; /* 固定高度 */ } ``` --- #### 2. **EM（相对单位）** - **特点**：相对于当前元素或父元素的字体大小（`font-size`）。 - **是否响应式**：是。 - **典型应用场景**： - 文本相关的间距调整，如行高、外边距、内边距等[^3]。 - 按钮的内边距（padding），使其与字体大小成比例变化[^1]。 - **优点**：灵活适应父元素的字体大小，适合局部调整。 - **缺点**：继承性可能导致嵌套计算复杂化。 ```css .parent { font-size: 16px; } .child { margin: 1em; /* 相当于 16px */ } ``` --- #### 3. **REM（相对单位）** - **特点**：相对于根元素（`html`）的字体大小（`font-size`）。 - **是否响应式**：是。 - **典型应用场景**： - 响应式设计中，确保全局一致性，避免继承问题[^3]。 - 整体布局的宽度、高度、间距等。 - **优点**：独立于父元素，全局统一，易于维护。 - **缺点**：需要明确根元素的字体大小。 ```css html { font-size: 16px; } .container { width: 20rem; /* 相当于 320px */ } ``` --- #### 4. **VW（视口宽度百分比）** - **特点**：基于视口宽度的百分比单位，1vw 等于视口宽度的 1%。 - **是否响应式**：是。 - **典型应用场景**： - 全屏布局，例如背景图片、全屏广告等[^2]。 - 动态字号调整，结合 `clamp()` 函数实现流体字体[^2]。 - **优点**：直接响应视口变化，适合大尺寸布局。 - **缺点**：小屏幕上可能显得过大，需配合其他单位限制范围。 ```css .hero-section { width: 100vw; /* 占满视口宽度 */ } .title { font-size: clamp(2rem, 4vw, 3rem); /* 动态字体大小 */ } ``` --- #### 5. **VH（视口高度百分比）** - **特点**：基于视口高度的百分比单位，1vh 等于视口高度的 1%。 - **是否响应式**：是。 - **典型应用场景**： - 全屏布局，例如登录页、首页英雄区域等。 - 根据视口高度动态调整元素尺寸。 - **优点**：直接响应视口变化，适合垂直方向的布局。 - **缺点**：移动端地址栏可能影响实际高度，需额外处理[^2]。 ```css .full-screen { height: 100vh; /* 占满视口高度 */ } ``` --- ### 总结与实践建议 - **PX**：适用于固定尺寸的场景，但缺乏灵活性。 - **EM**：适用于局部调整，但需要注意嵌套计算。 - **REM**：推荐用于全局布局，确保一致性和可维护性。 - **VW/VH**：适用于全屏布局或需要直接响应视口变化的场景，但需注意边界条件。 通过合理组合这些单位，可以实现更灵活、更适应多设备的前端设计。例如，结合 `Sass` 函数自动转换 `px` 到 `rem`，或使用 `clamp()` 实现动态字体调整。 ```scss @function rem($px) { @return ($px / 16) * 1rem; } .box { width: rem(320); /* 自动转换为 20rem */ } ``` ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值