10分钟了解前端各种像素，em，rem等概念
2024-07-02 11:40:03 #面试 #css

前端经典的em,rem，还有像素概念的问题，我发现很多说法都不统一，怎么说的都有，搞得我都有点不好抄统一的面试回答了。

干脆这里结合自己的理解，统一整理下，以便防止面试时候混乱。

正文

关于像素问题，几乎提到移动端适配这方面，这些基础概念就是在面试中绕不开的。

看了很多面试中都提到相关的问题，各种说法混乱无比，索性自己这里一把梭，把所有的概念都整理一下。

分辨率

我们实际开发中常说分辨率，但开发中说的内容可能指向的是不一样的内容。

物理分辨率

指的是显示屏的最高分辨率，又称标准分辨率。

屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。

我们实际使用过程，分辨率是可以改变的，比如我们手动将1920 * 1080的屏幕换成1600 * 900的分辨率，屏幕会按照你调整的要求，重新将屏幕切割为1600 * 900的像素点阵，形成新的分辨率。

不过，此时屏幕实际的物理分辨率依然还是1920 * 1080，这是屏幕自己固有的设备像素大小，并非我们可以手动调整的。

我们平时说的时候习惯性的说的分辨率，多数情况下都是指代最高分辨率，没什么人提你当前屏幕的分辨率是多少。

像素密度

正常来说，像素越大肯定是越清楚，但是这前提是要加个限定条件，那就是屏幕实际的大小要一样。

不然，物理分辨率同样是1920 * 1080的屏幕，一个尺寸是32寸，一个屏幕是100寸，实际显示效果确实一样的话，这怎么可能呢？

这里，就要引入一个概念：像素密度，ppi（pixels per inch）。

像素密度，表示沿对角线每英寸长度的像素数目（单位是dpi），越大显示的越细腻。

通过上边的例子，我们应该很快就能明白，像素密度的含义。

物理像素

物理像素(px:physical pixel)又可以称为设备像素(dp:device pixel)

我们以实际设备屏幕举例，我们说的1920 * 1080的屏幕，实际上就是在说：宽度方向有1920个像素点，长度方向有1080个像素点。

三者关系

设备尺寸 × 像素密度 = 物理分辨率（设备像素）

这里举个例子：

iphone6s 对角线长度为5.5 英寸，像素密度401 dpi，分辨率 1920 * 1080，计算可得对角线的设备像素为2205.5。

5.5 * 401 = 2205.5

这里说明白了这三者的关系，我们才好说明白接下来CSS的像素概念，即逻辑像素。

CSS像素

CSS 的像素单位，其尺寸大小是相对的，也有称其为独立像素的，这里为了避免大家混乱，下边统一称呼CSS的像素为逻辑像素。

逻辑像素

提到逻辑像素(logical pixel)，也可以称为设备独立像素(dip : device independent pixel）。

当然，这两个名词我们大多数开发者可能都会陌生，实际上这里就是我们平常用到的CSS样式的像素单位。

物理像素与逻辑像素的关系

很多人这时候估计平时没有遇到过相关概念，所以一时间会有些懵，难道物理像素和逻辑像素有什么不同吗？难道我写了个100 * 100 的box，在小屏幕上就不是100 * 100了？

答案是：不是的。

1
2
3
4
.box {
    width:200px;
    height:200px;
}

比武我们这里写了一个100 * 100的box，假设在物理分辨率为100*100的屏幕上，它以100 * 100的方式展示，1个逻辑像素，用1 * 1个物理像素来表示。

而在 400 * 400 的屏幕上，我们同样让这个BOX达到充满屏幕的效果，那就需要4 * 4个物理像素来表示。

后者因为用更多的物理像素来展示，所以看起来更清晰，更精细。

设备像素比

我上边这个例子说的有个问题，为什么在有点屏幕上要以物理像素：css逻辑像素 = 1 ：1 的比例展示，有的要以 4： 1的概念展示呢？

这里要引入一个概念：设备像素比（dpr : device pixel ratio）。不过这个说法也很混乱，我看很多整理的说法，有的说缩放比，也有说缩放因子的。

实际上，这就是物理像素与逻辑像素的比例概念。

我们这里为了接下来不混淆概念，统一就叫设备像素比。

1个css的逻辑像素，用更多的物理像素表示，那当时是比例越高，越清晰喽，如下例子。

1
2
标清屏：dpr = 2 / 2 = 1
高清屏：dpr = 4 / 2 = 2

因此，设备像素比越高，我们看到的网页也就越清晰，这也是为什么有时候我们看到有些手机实际屏幕很小，但看到页面的效果却很清晰。

屏幕虽小，但是实际物理分辨率和大屏一样，因此同样的网页，在更高的设备像素比的设备上显然看着更清晰，更细腻。

我们经常在设计师手中拿到的UI稿件，肯定会看到@1X，@2X，@3X，实际上就是这个就是指设备像素比。

tips：逻辑像素相对于设备像素的放大比例，可通过window.devicePixelRatio获得，pc上可以用个个性化来设置，但二者并不完全等同。

禁用缩放

提到上边的设备像素比的概念，有人可能会有疑问，按照这么说，岂不是我把页面用手势捏一下，就能改动页面的设备像素比？

是的，用户在移动端可以随意通过手势缩放网页，为了防止用户随意控制，我们便有了如下的操作。

1
2
3
4
5
6
7
8
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

width // 设置 viewport 的宽度，正整数/字符串 device-width
height // 设置 viewport 的高度，正整数/字符串 device-height
initial-scale // 设置设备宽度与 viewport大小之间的缩放比例，0.0-10.0之间的正数
maximum-scale // 设置最大缩放系数，0.0-10.0之间的正数
minimum-scale // 设置最小缩放系数，0.0-10.0之间的正数
user-scalable // 如果设置为 no 用户将不能缩放网页，默认为 yes，yes / no

相对单位

因为不同设备的的dpi不同，有时候PC上看上去非常正常的页面，放在手机端可能就显得不正常。

为了做各端的适配，于是前端衍生出了一种概念，相对单位。

em

上面提到，想让我们的网页在不同分辨率的设备（移动端）上正常显示，最好我们的元素长宽，外边距，内边距等都是动态的。

上面说到，我们在移动端一般这样设置：

1
<meta name="viewport" content="width=device-width;initial-scale=1" >

这个时候我们1px的大小就已知，iPhone6上为：

1
1px = 1/750（分辨率） * 2（设备像素比） = 1/ 375。

既然1px的大小固定了，那么我们只能动态改变一个元素设置的px了，比如说在iPhone8上是120px；而在iPhone6上需要是100px。

这时候我们可以用js去动态计算，根据屏幕大小。

但是显然很麻烦，需要对每一个元素的长宽，内边距，外边距都需要调整，这显然是一个巨大的工程。

这时候我们就可以用到em这个单位了，em单位的名称为相对长度单位，是根据它父元素的字体大小来计算的。

一般默认情况下：16px = 1em，这里要插一嘴，有的远古面试官经常会问：为什么1em要等于16px？

因为浏览器默认的字体大小都是16px，所以没有重新设置浏览器默认字体大小的话1em就等于16px。

在页面里要用到em作为单位的话，默认的1em=16px会使得在计算他们转换的值时非常不方便，比如我要把一个块里面的内容字体大小设置成18px，但我只想用em做为单位，那么情况就会这样，1em=16px，1px=0.0625em，得18px=1.125em（0.0625em*18）。

这太麻烦，所以为了简化px和em之间的换算，需要在body里定义font-size:62.5%，即将浏览器初始化为即1em=10px，这样的话，上面的font-size:18px就等于font-size:1.8em。

计算公式：1/父元素font-size值*需要转换的px=em值 (PS:父元素font-size的单位没有关系，无论px还是em)

这是早期的适应方式，当所有单位都采用em时，我们只需要改变body的 font-size，那么其他子元素宽度就能动态变化了，显然方便很多。

rem

rem是CSS3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。

rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。

有了rem这个单位，我们只需要通过JS调整根元素html的font-size就能达到所有元素的动态适配了，这里附上一段常用适配代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
    × ================================================
    */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

vh，vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。

vw 始终是针对窗口的宽，同理，vh则为窗口的高度。

这里的窗口分成两种情况

  • 在桌面端，指的是浏览器的可视区域
  • 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素，而vw、vh相对的是指代当前窗口。

适配方案分析

无论是哪种方案，本质上都是为了解决移动端适配的问题。

这里本来打算自己整理一下各种方案的优劣，没想到有人已经整理好了，而且非常详尽：一次搞懂数据大屏适配方案 (vw vh、rem、scale)。

虽然是数据大屏的方案整理，但是已经够用了。

方案 实现方式 优点 缺点
vw vh 1.按照设计稿的尺寸，将px按比例计算转为vw和vh 1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况 1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale 1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放 1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配 1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。
rem + vw vh 1.获得 rem 的基准值 2.动态的计算html根元素的font-size 3.图表中通过 vw vh 动态计算字体、间距、位移等 1.布局的自适应代码量少，适配简单 1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.图表需要单个做字体、间距、位移的适配

结语

这些基础概念，如果不是深入研究移动端适配的人，应该不会去深入了解，毕竟这都算是以前的老古董知识了。

实际开发中，移动端大多数中小厂商为了节省成本，应该是用Uni-app一把梭，直接用rpx完成移动端单位的适配。

甚至有些项目为了图省事的，直接用px糊弄了事，很少有人去实际操心适配的问题，毕竟多数都是为了赶工期。

这里今天整理一下，也算是梳理以前有些混乱的知识体系，把以前脑海中各种混乱的名称做了个整合，心情也算是颇为舒畅。

不过，关于移动端的适配，我这里只是浅浅聊了一下，后续有时间会逐步整理相关的知识，防止面试官去面试这些乱七八糟的考验广度的面试题。

参考

px/em/rem的区别与应用

【CSS】一文搞懂 em、px、rem、vh、vw 的区别！

px/em/rem的关系与区别_不同分辨率的设备上,1px的大小是不一样的-CSDN博客

一次搞懂数据大屏适配方案 (vw vh、rem、scale)

Prev
2024-07-02 11:40:03 #面试 #css
Next