移动端适配方案二

续上篇 移动端适配方案一 ，了解了关于 视口 和 像素 之后，我们继续关于适配。

适配的一切，都要忠于设计稿。

我只讲我用过的

rem布局方案 登场，目前我采用的方案是这样的(如无特别说明，以下的尺寸均是指宽度):

1.已经和设计师沟通好设计稿的尺寸为750px；
2.前端这里以375px的6为依据(初始化宽度)，初始化html的fontSize为100px(方便计算)，采用理想视口：

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

看着很暴力，嗯。。。对。。。
依旧举个例子，设计稿上一个元素的尺寸是16px；那么在生成过程中，我们会转化成0.08rem；
以上，便是适配的过程。

用过的要思考

当我们通过一个简单的操作就可以把产品推送到百万级的用户面前的时候，应该体会到的是，科技赐予我们的力量。
下面分析下上述原理。
所有的假设都会有一个前提，这里的前提，忘记了往上看。
如果你跟设计师沟通好了，恰好跟我的情况一致，那恭喜，方案伸手即可用；如果是别的640，甚至是1242的，那么继续往下看。
针对6的，我们解决了，那么如果是6plus、4的呢 给你瞅个眼花缭乱的 。
这里我们加了段js，用来响应不同尺寸的屏幕对应的根元素基准值，大概意思是这样的：

var initWidth = 375,
    initSize  = 100,
    w         = window.innerWidth,
    fixScreen = w/initWidth*initSize;
document.documentElement.style.fontSize = fixScreen + "px";

适配？交给js去吧，静态部分只需计算好设计稿的尺寸跟对应的css像素，别的dpr，ppi，lpi，视觉视口，理想视口，布局视口…bye

说我想说的

理论部分，目前确实不擅长，各种名词和之间的逻辑关系。理解之后，我只用自己熟悉的语言来描述出来，加深记忆的同时，或许会帮助一些人。
强烈建议看上一篇 移动端适配方案一 ，我开始继续逼逼。

这里我们可以假设dpr铺满“布局视口”的每一个像素点，那么也就是说此时的“布局视口”就是理想视口，就是视觉视口，简单理解就是1px=1dpr。

但是移动设备(这里主要是手机，pad等)，往往不能给我们展示出真正的布局视口，所以需要适配。也就类似在清明上河图上显示出北宋汴京社会全貌。
同样是表示卖菜的商贩，图纸上可能就是一个点，而社会上可能就是一大片区域，区别就在于资源的限制。如果想要在视觉视口上表示出布局视口的所有内容，那么肯定的一点就是单位面积上可用来表示元素的资源密集了，轮廓我们就可以按照比例放小点了，因为他也可以表示的很清楚，丝毫不逊于布局视口的展现。

所给图纸的大小不一样，我们就需要不同的适配，用来表现同样的东西。

清明上河图只有一份，在故宫放着。一个团队开发的标准也只有一个，上面方案就是一个标准，然后不同画布我们根据标准来等比缩放，那么同样的数字和单位的结合，在不同的图纸上，表示的大小就可能会不一样，在A4上可能是16px，那么在A2图纸上可能就是32px，因为可用资源增多了嘛。

回过神来，设计稿是按照750px来设计的，元素是16px，那么设计师想要表达的是在750px的设备上展现的尺寸就是16个物理像素，在PC端，因为布局视口和视觉视口是一致的，我们不用适配，在移动端，不要高兴太早。
同样表示的16个像素点，在6的375px下，表示设计稿元素同样的尺寸，因为其dpr为2，也就是说每个css像素，可以表示尺寸2个物理像素，所有自然而然的css像素就是8px了，没毛病。

这就是跟设计师沟通达成一致后的方案，皆大欢喜。

总结一下，我们确定基准6，然后结合 meta 和 javascript ，前者锁定理想视口，后者响应设备，重置根元素基准值。相关代码在来一遍：

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'>
var initWidth = 375,
    initSize  = 100,
    w         = window.innerWidth,
    fixScreen = w/initWidth*initSize;
document.documentElement.style.fontSize = fixScreen + "px";

（本文完）