“不要再问我XX的题目”系列：

一、
不要再问我this的指向题目了

二、
不要再问我跨域的题目了

挪动端适配的题目，平常来讲我们都不会去穷究，因为这类东西都是设置一次就再也不必管的了，接到设想图就依据家传套路撸就完事了。循序渐进的一定只能成为运动页写手，研讨透辟今后，才成为一位专业的运动页写手嘛。

牵扯不清的关联

文章最先，我们须要来捋清楚像素、视口以及缩放之间种种一刀两断的关联，来抽丝剥茧一波。

像素

像素我们写得多了，不就是px嘛，为何要拿出来讲呢？因为像素还不仅仅就是px。

• 装备像素

装备像素也能够叫物理像素，由装备的屏幕决议，实在就是屏幕中掌握显现的最小单元。

• 装备自力像素

装备自力像素是一种能够被顺序所掌握的假造像素，在Web开辟中对应CSS像素。

• DPR

装备像素与装备自力像素之间的关联就是，DPR（装备像素比），装备像素比 = 装备像素 / 装备自力像素。这条公式建立的条件是，缩放比为1，缘由下面讲到缩放的时刻就会晓得。依据这类关联，假如装备像素大于装备自力像素（DPR大于1的装备，我们常说的高清屏或许Retina屏），就会涌现一个装备自力像素对应多个装备像素的状况：

视口

遐想夙昔智能手机刚出的时刻，很少网站去特地适配挪动端，然则用户是能够直接从手机去接见PC端网站的，所以如何显现好一个网站，不管这个网站是一个PC网站照样挪动端网站，就是亟需处置惩罚的题目。所以挪动端三个视口规划视口、视觉视口、抱负视口横空出世，成为种种挪动适配计划的基本。

• 规划视口

规划视口是在html元素之上的容器，我们的页面就“装”在规划视口中。
想一想我们常写的width:100%，这个100%是基于什么盘算出来的呢？去翻材料会看到：假如某些属性被给予一个百分值的话，它的盘算值是由这个元素的包括块盘算而来的。那html元素的包括块是什么呢？没错，就是我们的规划视口，它是一切CSS百分比推算的泉源，假如说CSS是一支画笔，那末规划视口就是那张画布吧。这张画布有一个默许尺寸（假如没有手动去设置meta viewport），平常在768px ~ 1024px间，能够经由过程document.documentElement.clientWidth猎取。如许一来，网页的规划就不再受限于装备的尺寸，即使是小屏幕的挪动端装备中也能容得下PC网站。

• 视觉视口

视觉视口是指用户经由过程装备屏幕看到的地区，能够经由过程缩放来转变视觉视口的大小，并经由过程window.innerWidth猎取。
这里有必要讲一下缩放，缩放转变的是CSS像素的大小，放大时CSS像素增大，则一个CSS像素能够逾越更多的装备像素，视觉视口会变小。什么？放大反而视觉视口变小？没错，这是因为视觉视口也是经由过程CSS像素器量，而放大就是使CSS像素放大，假定屏幕上原本须要200个CSS像素才占满屏幕，因为放大，如今只须要100个CSS像素就可以占满，所以视觉视口的宽就变成100px。
虽然缩放转变了CSS像素的大小，但挪动端的缩放是不会转变规划视口的，所以缩放并不会影响规划，不过在PC端是会影响规划的。最直观的觉得是，我们日常平凡在挪动端双指缩放网页，全部网页的规划是没有变化的，能够经由过程拖动来看到差别地区的东西，然则在PC端举行缩放，比方阅读时想笔墨大一些而对网页举行放大操纵，这时候字是放大了，但全部页面的规划会有所转变。那末既然与规划视口无关那还跟谁有关联呢？答案就是下面预备要讲的抱负视口，它们之间的盘算体式格局是：缩放系数 = 抱负视口宽度 / 视觉视口宽度

• 抱负视口

抱负视口是指网站在挪动装备中的抱负大小，这个大小就是装备的屏幕大小。
为何须要抱负视口呢？起首，先来看看如今的状况是怎样的不抱负。我们在阅读一个没经由挪动适配的网站时，因为规划视口在768px ~ 1024px之间，全部网站就“画”在一个这么大的“画布”上，但因为手机屏幕比“画布”小，所以须要经由减少才塞进手机屏幕，结果我们阅读网站的时刻虽然看得见全貌，但内里的东西都变得很小，须要放大一下才看得清，就是这么不抱负。假如不须要放大就可以够看得清那就很抱负了嘛。追念一下上面不抱负的处置惩罚计划，就是将一个大画布经由减少装进小屏幕里，假定如今画布跟屏幕一样大，就在这个画布上作画，岂不是很适宜？
所以总结起来，抱负视口说白了就是抱负的规划视口，经由过程<meta name=”viewport” content=”width=device-width, initial-scale=1″>来设置。

将它们连在一同

熟习Meta viewport

<meta> 元素可提供有关页面的元信息，不会显如今页面上，能够用来通知阅读器如何剖析页面。<meta>能够设置的东西许多，但这里只讲vieport，它是一切挪动适配计划的基本。
起首meta viewport的设置花样是<meta name=”viewport” content=”name=value,name=value”，个中name的值可设为：

1. width：将规划视口设置为牢固的值，比方375px或许device-width（装备宽度）
2. initial-scale：设置页面的初始缩放
3. minimum-scale：设置最小的减少水平
4. maximum-scale：设置最大的放大水平
5. user-scalable：设置为no时禁用缩放

虽然只要五个值，但仍有一些值得注意的点：

设置initial-scale的影响

依据公式缩放系数 = 抱负视口宽度 / 视觉视口宽度 ，假如设置了initial-scale比方为0.5，那末以iPhone6为例，iPhone6的装备宽度是375px，即抱负视口宽度也为375px，所以视觉视口宽度 = 375px（抱负视口宽度）/ 0.5（缩放系数）。很显著设置了initial-scale就相当于初始化了视觉视口，而且会将规划视口初始化为这个视觉视口的值。

width和initial-scale共存

上面说到设置了initial-scale相当于初始化了视觉视口和规划视口，但width用于指定规划视口的大小，那末一同设置的话听谁的呢？
照样以iPhone6为例，它的尺寸是667（h） * 375（w），假如设置<meta name="viewport" content="width=400, initial-scale=1">，实行一下console.log(`规划视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth}`)会获得“规划视口: 400; 视觉视口: 400”。
这时候刻扭转一下装备，这时候尺寸变成了667（w） * 375（h），再实行一下console.log(`规划视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth}`)会获得“规划视口: 667; 视觉视口: 667”。
结论是：width与initial-scale都邑初始化规划视口，但阅读器会取其最大值。

设置抱负视口

这时候刻再看回<meta name=”viewport” content=”width=device-width, initial-scale=1″>，显著width=device-width和initial-scale=1都是去初始化规划视口成抱负的规划视口，只写个中一个不就完了嘛，为何要两个都一同写呢？因为有的阅读器只设置个中一个，不能保证抱负视口的尺寸能跟着屏幕的扭转而准确转变，所以两个一同写只是为了处置惩罚兼容性题目。

惬意地复原挪动端设想图

上面说了许多理论知识，实在就是为了能有一套计划惬意地复原挪动端设想图，做出一个专为挪动端接见的页面。

典范的题目

• 图片

这里的图片题目是指高清/Retina屏下图片会显现得比较隐约，这是因为我们日常平凡运用的图片大多数是png、jpg如许花样的图片，它们称作是位图图象（bitmap），是由一个个像素点组成，缩放会失真。上面讲像素的时刻说过，这类高清/Retina屏DPR大于一，则一像素横跨了多个装备像素，而位图图象须要一个像素点对应一个装备像素才清楚。所以假定一张100 x 100的图片放在一般屏上看是清楚的，放到高清/Retina屏上就会显得比较隐约，那是因为原本100 x 100的图片在一般屏上图片像素与装备像素一一对应，而到了高清/Retina屏上一个图片像素却要对应多个装备像素，如许一来看起来图片就比较隐约。

如图所示，假如一个图片像素要对应多个装备像素的话，那这些装备像素只能显现成跟这个图片像素差不多的色彩，致使看起来会隐约。
既然晓得了题目发生的缘由，那处置惩罚要领也很简朴，位图图象须要一个像素点对应一个装备像素才清楚嘛，那就原本是100 x 100的图片在DPR为1的屏幕上显现清楚，在DPR为2的屏幕上显现隐约，那就在DPR为2的屏幕上放200 x 200的图好了，如许就一一对应了。

• 1px边框

“你看看设想图这根线是很细的，为何你完成出来那末粗，看起来很劣质的觉得。”
没道理呀，设想图量的是1px，css写的也是1px，怎样会粗了呢？平常设想师出图的时刻，都邑依据一个尺寸作为规范来出图，比方依据iPhone6的尺寸出图，就是一张750px宽的设想图，这个750px实在就是iPhone6的装备像素，在丈量设想图时量到的1px实际上是1装备像素，而当我们设置<meta name=”viewport” content=”width=device-width, initial-scale=1″>时，规划视口即是抱负视口即是375px，而且因为iPhone6的DPR为2，写css时的1px对应的是2装备像素，所以看起来会粗一点。
那末只要写0.5px就是对应1装备像素了嘛。是的，道理是这么说，然则许多阅读器并不支撑0.5px的写法，致使显现不出来，但不要紧，网上许多要领处置惩罚这个题目的要领就不细说了，这里只是讲清楚1px边框题目发生的缘由。

复原设想图

因为PC端屏幕平常都邑比设想图尺寸要大，所以只须要居中牢固一个内容区用于显现设想图的内容，其他多出的处所留白即可。而挪动端屏幕有大有小，设想图平常会以一款机型为规范来出图，比方说iPhone6的尺寸，假如不经处置惩罚直接量设想图就开干会涌现什么题目呢？

（从左到右为iPhone4、iPhone6、iPhone plus）
能够看到以iPhone6为规范出的设想图丈量出来350px x 350px的元素在iPhone6上写width: 350px;height: 350px;是刚刚好的，摆布的间隙各有10px，但小一点的屏幕iPhone4横向滚动条都出来了，而plus摆布间隙显著比10px大许多，如许一来差别尺寸的屏幕出来的结果跟设想图的结果就会有差别水平的相差，这并非我们想要的，我们想要的是差别尺寸的屏幕显现的结果与设想图比例是一致的。
既然想要的是差别屏幕尺寸显现的比例与设想图一致，那末明显适配计划就是等比缩放。
（以下代码都是为了报告道理，没有过量的细节斟酌与测试，不能用于临盆环境）

• viewport计划

说到缩放，起首想到的当然是initial-scale。追念一下initial-scale的作用：设置了initial-scale就相当于初始化了视觉视口，而且会将规划视口初始化为这个视觉视口的值。那末我们是否是能够以设想图为基准等比缩放规划视口从而适配呢？

<script>
    const scale = window.screen.width / 750
    document.write(`<meta name="viewport" content="initial-scale=${scale}">`)
</script>

这类体式格局举行适配长处是简朴粗犷，瑕玷是太简朴粗犷了，因为viewport的设置是影响全局的，如许一来虽然能够直接将设想图量得的尺寸写到css上，但假如有一些须要处所不须要等比缩放而须要设置牢固尺寸，比方请求在差别尺寸屏幕上显现牢固大小的笔墨，或许你引进了一个库，内里的有款式你也不晓得人家是依据如何的适配计划举行适配的，那末到了你的项目里因为全局的viewport缩放，可能会影响到这个库的显现结果。

• rem计划

差别于px是牢固尺寸单元，rem是相对单元，相干于html标签字体大小的单元。比方html标签的font-size为100px，那末1rem就即是100px。借助rem这个相对单元我们一样能够到达等比缩放的结果。

• 这个计划不须要对viewport举行缩放，所以起首依据通例我们让规划视口即是抱负视口：<meta name="viewport" content="width=device-width, initial-scale=1">
• 照样以iPhone6的装备像素为规范的设想图，宽是750px，假定以设想图为规范的html标签的font-size为100px，所以1rem = 100px，那末这个设想图总宽就有7.5rem
• 以总宽是7.5rem的设想图为规范，则差别屏幕尺寸的总宽应当也是7.5rem，因为上面设置了规划视口即是抱负视口，所以以iPhone6为例，iPhone6的规划视口即是抱负视口，则它的规划视口为375px（也就是总宽7.5rem），如今只须要处置惩罚在规划视口为375px的状况下，html的font-size须要设置若干。很简朴，html font-size * 7.5 = 375，那末font-size为50px。
• 拓展到其他屏幕document.documentElement.style.fontSize = `${document.documentElement.clientWidth / 7.5}px`
• 如今我们只须要丈量设想图，比方设想图有一个300px的元素，那我们写css的时刻就写成3rem（因为以1rem = 100px为基准，所以这里300px / 100即可）

运用这个计划，我们只对须要等比缩放的元素运用rem，而请求牢固尺寸的处所运用px即可，如许一来相干于viewport计划来讲就比较天真，能够按需运用而不是一刀切。不过这类计划写css的时刻可能会没那末直观，本钱可能会高一点点，然则借助构建东西或许less/sass能够处置惩罚，毕竟如今应当很少项目不运用这些东西的了吧。

• 加强版rem计划

这里所说的加强版rem计划实在就是手淘的Flexible计划（也相似挪动端高清、多屏适配计划），终究加强了什么呢？那就是，经由过程设置viewport进而全局处置惩罚1px边框题目。
既然要经由过程设置viewport来处置惩罚1px边框题目，那设置这个viewport的体式格局一定内有天地：

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他装备下，依旧运用1倍的计划
        dpr = 1;
    }
    scale = 1 / dpr;
}

得出的scale用于设置viewport的缩放document.write(`<meta name="viewport" content="initial-scale=${scale}">`)，如许一来，关于Retina屏将viewport缩放为1 / dpr终究发生的结果是，1px css像素严厉即是1px 装备像素，由此处置惩罚了1px边框题目。那为何只对iPhone举行缩放呢？请看大漠先生的文章再谈Retina下1px的处置惩罚计划。
其他与rem相干的设置与上面的rem计划相似，这里就不再睁开说了。
这个加强版rem计划最大的上风是处置惩罚了1px边框题目，但由此也举行了viewport的缩放，仍然会面临着上面说的viewport计划涉及到的一些影响，为此该计划会经由过程给html设置data-dpr

document.documentElement.setAttribute('data-dpr', dpr)

从而写css的时刻能够针对差别的dpr牢固设置尺寸：

.test {
    width: 1rem; 
    height: 2rem;
    font-size: 12px; 
}
[data-dpr="2"] .test {
    font-size: 13px;
}
[data-dpr="3"] .test {
    font-size: 14px;
}

• vw计划

vw也是一个相对单元，它相对的是规划视口，1vw就是1%的规划视口宽度。实在rem计划就是在模仿vw，来看看运用vw怎样做。

1. 照样熟习的iPhone6规范设想图，宽750px。那末1vw = 1%视口宽度的话，按设想图来讲就是100vw = 750px，则1vw = 7.5px。
2. 设想图量得一个元素是100px，css须要写成 Xvw * 7.5 = 100，所以X就即是13.3vw。
3. 盘算的话照样交给构建东西即可，细致请看再聊挪动端页面的适配

rem计划有的上风vw也有，而且也不会像rem那末绕，但就是兼容性不够rem好，久远来看vw末了会接棒rem作为挪动适配的主力，因为它生来就干这个事变呢。

终究完毕了

没有银弹。
全局viewport缩放计划很粗犷？但关于请求不高也不须要统筹牢固尺寸的页面，上来就全局缩放，拿起设想稿就可以够写代码了。请求高又想天真，还会怕构建的那一点点贫苦吗？rem计划走起。兼容性不须要斟酌，那vw计划直白又文雅不碰运气吗？计划没有好坏之分只要适宜与否。
末了，假如有说得不对的处所，还望斧正。