移动端适配方案

[Leo-lin214]

在当年 Web 端盛行的年代，处处为了处理不同浏览器之间的兼容性而猛抓头脑，本以为在手机时代的到来后，移动端网页浏览基本不需要处理兼容性问题时，却恰恰出现另一个必须处理的事情，那就是今天要讲的移动端网页适配方案。

在我们上班时，经常是设计师以 iphone6 作为基准（即物理像素为 750px）设计好设计图后，交给前端开发者，然后由开发者定义一套适配方案来适配其他任意尺寸的手机。

那么在开始之前必须先了解某些知识点。

必须先了解的像素知识

1. 物理像素（physical pixel）。

   一个物理像素就是显示手机频幕上最小的物理显示单位。

   那么我们平时说 iPhone 6 的分辨率是 750 * 1334，那么横向物理像素值就是 750px，竖向物理像素值就是 1334 px。

2. 设备的独立像素（density indenpendent pixel）。

   设备的独立像素也叫逻辑像素，其中 CSS 像素就是设备独立像素的一种。

   那么我们平时在浏览器的控制台做自适应调试时，常常可以发现 iPhone 6 是 375 * 667，其中 375 就是 CSS 像素值。

3. 设备的像素比（device pixel ratio）。

   设备的像素比的计算可以按照如下计算。

   设备的像素比 = 物理像素 / 设备的独立像素

1px的物理像素问题

在日常开发中，设计师以 iPhone 6 作为基准来设计相应的设计图，那么他们在设计图中画一条 1px 的线时，那么粗心的开发者如果没有做移动端适配方案的话，就会直接写 1px 出来。

当然上述的操作肯定不能通过设计师们的审核，因为在真机上看到的效果便是一条很粗的线。为什么？

不卖关子啦，其实就是由于 iPhone 6 的 CSS 像素值为 375px，也就说明在 iPhone 6 中设置宽度为 375px 时，就相当于设置全屏。问题来了，当在 375px 中设置一个 1px 的线时，放到真机 750px 中显示肯定会变粗为 2px。

简单说明，1px 是相对物理像素而言，而 0.5px 时才是相对 CSS 像素值而言。

既然知道了问题所在，那么解决方案有哪些？接下来我就简单总结一下。

1. 媒体查询（-webkit-min-device-pixel-ratio）

   .border {
     border: 1px solid #000;
   }
   @media screen and (-webkit-min-device-pixel-ratio: 2) {
     .border {
       border: 0.5px solid #000;
     }
   }
   @media screen and (-webkit-min-device-pixel-ratio: 3) {
     .border {
       border: 0.333px solid #000;
     }
   }

   优点：能有效地根据设备像素比来设置相应的边框长度。

   缺点：安卓和低版本的IOS并不适用。

2. transform变形

   .border {
     &::after {
       content: '';
      	position: absolute;
      	border: 1px solid #000;
       transform: scale(0.5);
       -webkit-transform: scale(0.5);
       pointer-events: none; /* 防止点击触发 */
       @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){
         -webkit-transform: scale(0.33);
         transform: scale(0.33);
       }
     }
   }

   优点：兼容性相对较好。

   缺点：对于圆角部分无法识别，也无法做到变形。

3. box-shadow阴影

   .border {
     -webkit-box-shadow: 0 1px 1px -1px #000;
   }

   优点：基本兼容所有场景，包括圆角。

   缺点：颜色不好处理，稍微处理不顺就会体验效果不好。

4. linear-gradient颜色浅变

   .border {
     height: 1px;
     background: linear-gradient(0deg, #fff, #000);
   }

   优点：可以处理颜色部分。

   缺点：对于部分安卓手机兼容性并不友好。

5. 动态设置 viewpoint 中的 initial-sacle 值

   下面会讲到这种方案，也是手机淘宝所使用方案。

移动端适配方案

1. 百分比布局 + 媒体查询。

   .container {
     width: 300px;
   }
   @media screen and (max-width: 375px) {
     .container {
       width: 150px;
     }
   }

   相对比较传统方案，需要兼容所有的手机尺寸，对于维护会造成很大的成本，因为新出一款新的不同尺寸手机都需要立马兼容。

2. Flex 弹性布局

   对于 Flex 弹性布局，是目前天猫手机端一直沿用的方式。

   必须先固定好 viewpoint。

   <meta name="viewpoint" content="width=device-width, initial-scale=1, user-scalable=no">

   对于编写元素的高度和宽度时，必须要将高度写死，宽度自适应。

   这样一来，当移动端的屏幕大小发生变化时，元素也会跟着变化。

3. rem 布局

   必须先设置好 viewpoint。

   <meta name="viewpoint" content="width=device-width, initial-scale=1, user-scalable=no">

   接着要动态计算根元素的 font-size 值。

   const clientWidth = document.documentElement.clientWidth
   if(clientWidth > 750) clientWidth = 750
   document.documentElement.style.fontSize = clientWidth / 7.5 + 'px'

   对于上述代码，简单阐述一下，设计师的设计稿是一般以 750px 物理像素作为标准来做设计图的，那么以 100 作为参照数（即100px = 1rem），主要是为了好计算，那么 750px 物理像素就是相当于 7.5 em了。

   那么 document.documentElement.clientWidth 获取的是设备宽度，即 CSS 像素，因此在 iPhone 6 中为 375px，那么根元素的 font-size 值便为 375 / 7.5 = 50px。

   那么在接下来编写元素的宽高或者边距时，则需要自己去计算。

   // 以前没做适配的写法，其中100px是设计稿的宽度值
   .container {
     width: 100px;
     height: 200px;
   }
   
   // rem布局写法，即在原来px基础上除以7.5
   .container {
     width: 13.33rem;
     height: 26.66rem;
   }

   这种方案也是移动端网易页面在使用的方案。缺点就在于需要开发者手动去计算，当然也可以使用 sass 中的函数来处理。

   @function pxToRem($num) {
     @return ($num/7.5) * 1rem;
   }
   .container {
     width: pxToRem(100);
     height: pxToRem(100);
   }

4. rem布局 + viewpoint缩放（也叫手机淘宝处理方案）

   手机淘宝处理方案，相当于在 rem 布局情况下，再对 viewpoint 中 inial-scale 进行动态加载。

   动态加载 viewpoint 中 inial-scale 。

   const scale = 1 / window.devicePixelRatio
   document.querySelector('meta[name="viewpoint"]').setAttribute('content', `initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, width=device-width, user-scalabel=no`)

   动态计算根元素的 font-size 值。淘宝另一个基准就是，html 元素的font-size计算公式为 font-size = deviceWidth / 10

   document.documentElement.style.fontSize = documemt.documentElement.clientWidth / 10 + 'px'

   在接下来的容器添加宽高属性时，也跟 rem 一样步骤，不过重点就在于，淘宝的计算会比网易难，需要自行计算。

   @function pxToRem($num) {
     @return ($num / 75) * 1rem;
   }
   .container {
     width: pxToRem(100);
     height: pxToRem(100);
   }

   拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75px，如果某个元素时150px的宽，换算成rem就是150 / 75 = 2rem

   为此，手机淘宝还特意封装了这种做法，叫 flexble.js。详情可看下面

   https://github.com/amfe/lib-flexible

5. vw 布局

   类似于 rem 布局，不过 rem 是相对根元素的 font-size 值确定，而 vw 相对屏幕视口宽度（即横向分辨率）确定，也就是长度等于 （视口宽度 / 100）。

   举个例子，在 750px 的设计图中，当看到一个元素标注的字体大小为 32px 时，那么就需要使用 vw 单位转化，也就是等于 32 / （750 / 100）vw。

   需要注意的是，必须设置 viewpoint 属性

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

可参考一下别人的好文章。

[移动端前端适配方案对比](