首先从屏幕最先提及.

屏幕是由一个一个显现单元构成的.
1 每一个显现单元都是物理天下实在存在的;
2 把一个显现单元的大小称为一个’物理像素’;
3 一般我们所说的 ‘分辨率’, 就是指一块屏幕显现单元的个数, 比方
750*1334, 示意这块屏幕由 750*1334 个显现单元构成

映照划定规矩

像素是盘算机体系内里的单元, 一般状况下, 我们让一个像素对应一个显现单元. 所以有时刻, 我们说屏幕高 667px, 实际上就是说, 屏幕的的高有 667个显现单元的高度之和.

随着手艺的提高, 显现单元能够做的越来越小, 比方之前是 10mm*10mm 的一个显现单元, 如今我们能够做到 5mm*5mm 一个显现单元.
为何寻求显现单元的小? 由于越小图象越邃密.

然则: 显现单元的变小, 意味着屏幕的分辨率变大。

这里就牵扯到了一些事变:

假定屏幕的大小稳定, 然则分辨率从 A, 变成 2A (也就是显现单元减少了一半)
而且: 一个像素对应一个显现单元, 这个划定规矩一直稳定

此时, 你底本宽度为 100px 的一个元素, 在这个 2A 屏幕上衬着出来, 你会显著的发明:
在视觉上: 这个 100px 显著比之前小了, 和之前的 50px 的时刻一样大小.

那怎样办啊, 如许显现肯定是不能够的, 所以我们要对这个状况做处置惩罚:

1 我们划定, 大小为 n*n 的显现单元, 是规范的显现单元, 规范意味着它符合我们久长的推断: 100px 在物理天下大概有多大.

2 我们要知道当前屏幕的显现单元, 和规范显现单元之间的大小比例,比方说当前屏幕的显现单元的大小是规范的一半照样 三分之一.

经由过程 devicePixelRatio 属性来获

我们能够以为:
devicePixelRatio 标记是: 规范显现单元/当前装备的显现单元

竖立在上面的基本上面, 你就可以够动态的调解元素的大小, 比方说某个元素 x 的宽度是 100px;

在 devicePixelRatio = 1 的装备上面宽度是 100px
在 devicePixelRatio = 2 的装备上面宽度就假如 200px;

ok, 那末我们来搞.
依据差别的 devicePixelRatio 来调解元素的款式.

var box = document.querySelector('.box');

var height = parseInt(getComputedStyle(box).height);
var width = parseInt(getComputedStyle(box).width);

box.style.height = height * parseInt(window.devicePixelRatio) + 'px';
box.style.width = width * parseInt(window.devicePixelRatio) + 'px';

这仅仅是一个元素的两个属性, 1000个元素, 每一个元素 5 个属性, 就可以够让你哭掉了.
所以这类处置惩罚体式格局肯定是不能够的.

然后我们发明了 rem 单元.
它的简朴诠释:

当你给某个元素A 设置了 height:2rem 的时刻
它会找到根节点(html) 的 font-size 值, 比方是 16px
然后拿 16 * 2 = 32px
作为元素A 的终究 height.

这个就可以够利用了
1 让元素运用 rem 作单元
2 然后掌握根元素的 font-size 值, 在差别的 devicePixelRatio 下面的时刻, 显现差别的值
比方你能够设置:

devicePixelRatio = 1, font-size(root) = 100px;
devicePixelRatio = 2, font-size(root) = 200px;

元素在这个时刻, 就会自动相应大小的变化.

好, 最先搞:

var fontSize = 100 * parseInt(window.devicePixelRatio) + 'px';
document.documentElement.style.fontSize = fontSize;

嗯, 效果照样不错的, 在差别的分辨率下面, 我们也能完成页面雷同了.

实际上, 上面的议论, 已处理了我们的题目:
在雷同物理尺寸下的装备, 如安在分辨率差别的状况下, 让一个 100px 的元素, 它对应的物理天下的
大小, 一直雷同?

如今更近一步, 上面的议论, 牢固了一个变量: 屏幕尺寸, 如今摊开这个变量, 牢固屏幕的分辨率这个变量.
这个题目就变成适配题目了:

场景形貌:
比方你的一个页面底本是以 375宽度为基本做出来的, 那末在装备的宽度变成 320px 的时刻,
你的页面就会出现题目: 挤压, 变形, 紊乱, 或许超越隐蔽, 超越转动等等操纵.

怎样办啊?
愿望的是在 320 也能一般显现: 让页面上的一切元素都减少一些, 也就ok了. 比方一个元素
在 375 装备上面显现这么大, 在 320 上面显现成这么大不就好了.

那末怎样减少?
rem;
你想下, 只需在屏幕的宽度变小的时刻, 让根元素的 font-size 随着变小, 那末一切运用 rem 作为单元的
元素, 是否是也随着变小, 目的就达成了.

那末怎样让 font-size(root) 随着屏幕的宽度变小而变小啊.

1. 选一对基准值, 比方: 375px/100px; 示意屏幕宽度为 375的时刻, font-size(root) 为 100;

2. 每次盘算一下就好, 比方发明屏幕的当前宽度为 320, 那末算不出来此时的 font-size(root) 吗??
   算出来不会设置根元素的 font-size 吗?

好吧, 上面说的临时都不要试, 先提一个事变.
一切的上面的议论, 实际上都竖立在:

当你屏幕的分辨率是 100100 的时刻, 你就具有一份 100100 大小的容器, 用来显现你的网页.
比方说, 你的 iPhone7 的分辨率是 6671334, 那末你就具有一份 6671334 大小的容器来放你的网页

惋惜并非如许的.

从 iPhone 宣布前夜提及:

开辟人员发明, 底本为 pc 开辟的网页
在 iPhone 上面显现不全, 这部份能够经由过程转动条来处理.
然则运用 百分比规划的页面就坑爹了, 底本在 pc 端阅读器上具有
的 20% 在 iPhone 上面就一点点了, 规划完全乱了, 坑啊.
为了处理这个题目, 开辟人员提出了一个的新的玩意: 'layout viewport'

我该怎样诠释这个玩意呢.

    ==============  // 这个是你的百分比页面所基于的宽度

    ===             // 这个是你屏幕的宽度

如许一来, 页面肯定会紊乱. 所以提出的 layout viewport 把模子变成如许:

    ==============  // 这个是你的百分比页面所基于的宽度

    =============   // layout viewport 的宽度

    ===             // 这个是你屏幕的宽度

你的页面会被放到 layout viewport 这个容器上面, 然后再将 layout viewport 减少到
和屏幕宽度一样的大小.
而且许可用户放大页面,经由过程转动条滑动来阅读器悉数页面.

在最初的时刻, 这类体式格局确实处理了 pc 端页面在手机上阅读的题目, 然则随着挪动端的鼓起,
大批的针对挪动端的页面被制造出来, 也就是模子变成如许:

    ===   // 针对挪动端做的页面

    ============   // layout viewport 

    ===   // 屏幕的宽度

如许很显著就出现题目了: 你的页面先放到 layout viewport 上面, 然后又减少到和屏幕宽度一致
终究显现出来的, 就是你的页面显著被减少了.

所以我们要处理这个题目, 要把 layout viewport 的大小, 变成和屏幕的宽度一致.
这里假定屏幕的显现单元一直是规范的显现单元大小。

怎样让 layout viewport 变成和屏幕的宽度一致呢?
经由过程 meta name=”viewport” 标签.

诠释一下:
meta name=”viewport” 有一个 content 属性, 它内里有几个值, 能够用来对 layout viewport
做处置惩罚. content 有以下几个字段:

initial-scale: 这个值会影响终究 layout viewport 的宽度, 盘算公式应该是如许:

屏幕的分辨率/(devicePixelRatio*initial-scale) = 终究的 layout viewport 的宽度. 

屏幕的分辨率我们能够拿到, devicePixelRatio 也能够拿到.
比方 iPhone7, 屏幕分辨率是 750*1334, devicePixelRatio=2, 当你设置 initial-scale=1 的时刻
layout viewport 的终究宽度就是 375;

这里有一个点, 我说一下;
我们能够让 layout viewport 的宽度是恣意值, 经由过程对 initial-scale 的设置.
那我们要设置它为若干呢?

能够设置成 375, 这个宽度, 是以规范显现单元为单元算出来的宽度
也能够设置成 750, 如许的话, 你的 1px 就完全对应这个装备的 1 个显现单元.

我们挑选后者, 由于这个牵扯到 1px border 的完成.
假如设置成这个, 那末你的 initial-scale 一直只需设置成 1/devicePixelRatio 即可,
由于 devicePixelRatio * 1/devicePixelRatio = 1;

另有其他的两个相干属性:
maximum-scale: 最大能放大若干
minimum-scale: 最小能放大若干

愿望不能缩放, 由于我们的页面不需要缩放就可以一般显现, 缩放了反而显现不正确。

终究兼顾一下:
我们要做的事变
1 让 layout viewport 变成和屏幕分辨率一致的宽度
2 依据装备宽度和 devicePixelRatio 来指明根元素的 font-size 值

这些操纵以后, 你就可以够完成终究的代码了.