小白需要知道的移动端适配原理

故事起因

在一个风和日丽的周五，某家公司的前端开发工程师（小前）正在coding，这时突然测试（小测）找到小明说到“不好啦不好啦，我发现咱们的h5应用在不同的机型上表现的差异有点大，还原度不太高，你能排查下嘛？”

经过一下午的跟踪与文档查阅，小明找到了原因。因为小明在能够影响布局的dom上使用了px。那么这个时候，小测提出的bug就转换成了这个问题：一套设计稿如何适应多端设备？

ps：

当然，最理想的情况就是UI给出多个尺寸下的设计稿，然后就媒体查询进行专精设置呗。

名词解释

在这个移动端适配上，对这些名词解释的文章有很多，但是各有各的解释，也各有各的理解。那到底哪篇文章是对的呢？我觉得保持一个理念就可以了：条条大路通罗马。你只要知道有这些名词就可以了，至于如何实现适配，方法都是一样的。

虽然此刻可能你看山不是山，看水也不是水。但是随着经验的积累，技术能力的提高，你再回过头来看这些基础的时候，你会觉得看山依旧是山，看水也依旧是水。

一、物理像素

又称设备像素。那px与它有什么关系呢？MDN上给出了答案：

css像素

从上图可以get到的知识点：

1、物理像素就是逻辑像素。只不过现在很少说逻辑像素。
2、px与物理像素的关系：px是程序与物理像素之间的桥梁。

二、分辨率

它是屏幕上的像素总数量。比如一个屏幕的分辨率是1920*1280，这也就意味着这个屏幕拥有1920个水平像素点以及1280个垂直像素点。

三、逻辑像素

也叫设备独立像素，它是css里面的长度单位，用来可视化物理机上的像素点。在默认情况下，1px就是1个像素点。

我们知道css有很多的长度单位，在这里我们只讨论px。

四、设备像素比

它是指设备水平方向上或者垂直方向上物理像素与逻辑像素之间的比率，一般使用dpr表示。

假设dpr = 1，这说明了1个逻辑像素，也就是1px，那么硬件上就会使用1个像素点来显示。

假设dpr = 2，这说明了1个逻辑像素，也就是1px，那么硬件上就会使用4个像素点来显示。

假设dpr = 3，这说明了1个逻辑像素，也就是1px，那么硬件上就会使用9个像素点来显示。

上面这是一个正向的逻辑，反过来看呢，就会有如下的观点成立：

以我的电脑为例，在我的电脑的系统信息里，我可以查到我的电脑的分辨率是3024*1964（此时代表着物理像素是3024*1964）

随后，打开浏览器，右键检查了我的html标签的宽度：

我发现浏览器的屏幕宽度的显示区域最多是1512px（此时的1512px就是逻辑像素），根据设备像素比的公式，我得出我的电脑的设备像素比是2。

为了印证我的结论，在控制台里输入：window.devicePixelRatio，结果证明了我的结论是对的：

那么根据上面的实验，就会得出下面的结论是成立的：

1、当设备的分辨率是m*n时，那么这台设备的屏幕的最大宽度是 m / dpr，屏幕的最大高度是 n / dpr。
2、屏幕的最大高度并不等于浏览器里的html的高度。

适配实现

经过上面的分析我们也能发现，其实很简单，就是单位换算，只要保证2边都不亏就可以。

（屏幕1 / 屏幕1对应的1单位） == （屏幕2 / 屏幕2对应的1单位）== 10（这个10是任意值）。

// 屏幕1对应的就是下面的document，屏幕2就对应着蓝湖的尺寸。
function setRem(){
    // 下面的10可以换成任意值，只要保证fontSize的小数位数尽可能的小就可以，因为小数位数越大
    // 意味着误差也越大，空白区域就可能越大
    document.style.fontSize = document.clientWidth / 10 + 'px';
}

最后

经过小前的不懈努力，终于在第二天上班的时候，小测露出来满意的笑脸～～