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

已于 2023-09-02 12:12:19 修改
阅读量678 收藏 7
点赞数 6
分类专栏： Web前端开发面试题（以练带学） 文章标签： html 前端
于 2023-09-02 12:06:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/upgrade_bro/article/details/132635589
版权

关于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

等式

卡皮巴拉
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
绝对长度 px px是像素值，是一个固定的长度，比如我们的米，厘米一样。 相对长度 为什么我们需要相对长度rem em等？ 固定长度已经不能满足我们现在的需求了。 举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好一点。 rem rem 与 px 的计算关系 rem的值是px的倍数 默认情况下font-size = 16px,那么1rem = 16px rem 如何修改与px的相对计算关系 我们可以在并且只能在html标签（因为html节点是根节点，就是rem里面的r：root）里面修改font-size : 32p
浅析rem和em和px vh vw和% 移动端长度单位
12-13
1.rem和em、px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情 这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到 结
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一
前端面试题|px、em、rem、wh、vh的使用方法和区别
weixin_48491416的博客
06-29 652
px、em、rem、wh、vh的使用方法和区别
面试题rem、em、vw\vh、px的含义
weixin_44206561的博客
08-13 979
这些都是长度单位 rem 是相对于根元素的，通常的做法是在html元素设置一个font-size属性，其他的元素大小都是相对于根元素大小来计算的 em 是相对于父元素的，当使用width、height、padding、margin时，如果是用em做单位，此属性的大小是相对于该元素的font-size属性 vw\vh 全称viewport weight \ viewport height，视窗的大小约为屏幕大小1%，设置宽度的时候建议使用%作为单位，设置高度的时候建议使用vh作为单位 px 像素的意思，像素
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2572
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
px、rem、em的区别与联系
热门推荐
XinKun的博客
02-26 1万+
一、区别： 1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 3.em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。 总之em相对于父元素，rem相对于根元素。 二、
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
域见同学的博客
06-17 3206
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-cplvfx-JJY.Cheng
06-22 8380
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
前端基础面试题：rem em vw vw 百分比区别？
sdasadasds的博客
07-28 397
注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...
px、em、rem、%、vw、vh单位之间的区别
01-08
字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px ...
px、rpx、em、rem 、vw/vh、百分比的区别？
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-28 517
点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料px绝对长度单位，根据维基百科解释：它是图像显示的基本单元，既不是一个确定的物理量，也不...
【前端面试之CSS】em/px/rem/vh/vw的区别
阿卡内的博客
08-02 204
em/px/rem/vh/vw的区别
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 4828
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
web前端CSS之“px、em、rem、%、vw、vh单位”区别
空投在我怀里的博客
05-29 3238
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体
前端面试题：px、rem、em、vh、vw、rpx的区别
qq_46582421的博客
01-05 544
px 像素，是相对于显示器屏幕分辨率而言的。 em 相对长度单位。相对于当前对象内文本的字体尺寸。会继承父级元素的字体大小。 rem 是相对于HTML根元素的字体大小。 vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。 ...
（每日一题）面试官：说说em/px/rem/vh/vw区别?
itpeilibo的博客
09-24 156
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em。
详解web前端长度单位（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
最新发布
我都博客
08-17 6279
在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。 而整体的长度单位分为两大类： 绝对长度单位包括：in,cm, mm, q, pt, pc, px 相对长度单位包括：em, rem, %, vw, vh, vmax, vmin, vm, ch, ex
rem、em、vh、px各自代表的含义
weixin_45954770的博客
09-21 1036
其他元素相对于根元素，也就是html字体大小计算方法：根元素字体大小乘rem的值—> 根元素的字体大小为16px，那么10rem就等同于10*16=160px。
vw/vh/px/em/rem/vmin/vmax区别
07-29
vw: 视口宽度的百分比单位，1vw等于视口宽度的1%。例如，如果视口宽度为1000px，那么1vw就等于10px。 vh: 视口高度的百分比单位，1vh等于视口高度的1%。与vw类似，但是基于视口高度计算。 px: 像素单位，是一个固定的长度单位。在不同的设备上，1px可能代表不同的物理像素。 em: 相对于父元素的字体大小的单位。如果一个元素的字体大小为16px，1em就等于16px。 rem: 相对于根元素(html)字体大小的单位。如果根元素的字体大小为16px，1rem就等于16px。 vmin: 视口宽度和高度中较小值的百分比单位。例如，在一个宽度为800px，高度为600px的视口中，1vmin等于6px。 vmax: 视口宽度和高度中较大值的百分比单位。例如，在一个宽度为800px，高度为600px的视口中，1vmax等于8px。 这些单位可以用于响应式设计中，根据视口大小自动调整元素的尺寸和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值