面试官：说一下 px、em、rem、vw/vh？em和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”的缩写，相对于根元素的字体大小。）

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

等式