移动端适配总结

26 November 2017

适配，是一个老生常谈的话题。这里总结下曾经用过的适配方案，也算是一个记录。

记得很久以前做移动端项目的时候，页面的适配，主要靠写百分比，当时觉得很麻烦，还得各种换算。后面陆续用过手淘的flexible方案，写死viewport里的width方案，也就是640方案，以及现在使用的vw & rem方案。下面对这三种方案做下比较。

flexible

参考：使用Flexible实现手淘H5页面的终端适配

如上面贴的文章，大漠大大已经说得很清楚了，设计稿100等分，1rem为10分,然后通过js去动态设置font-size和meta的缩放，布局使用rem，文字还是建议用px，样式里设置不同的dpr字号大小不一样，这样基本就适配了。我这里也做了个例子，如下 http://frontjs.cc/demo/vwrem/mindex-flexible.html

640方案

这里简称640方案，也就是设计稿方案，如果拿到的设计稿是640的，那么就设置下面的meta

<meta name="viewport" content="width=640, user-scalable=no">

当然，设计稿如果是750的话，上面的width改成750就可以了。然后我们布局就可以直接按照设计稿上来写，是不是很方便，应该是最方便的一种适配方案了。这种方案我也做了个🌰 http://frontjs.cc/demo/vwrem/mindex-750.html

这个方案在部分华为的机器上该meta设置不会生效(遇到过一次)，具体的可以看看知乎上关于这个的讨论

vw

最后一种方案，也就是现在经常使用的，就是我们的vw & rem 结合了。

屏幕宽度就是100vw，我们使用vw来设置html的font-size，布局和文字都使用rem，就能很完美的适配了。之前看过张鑫旭的一篇文章，对这个介绍的很详细，并且结合calc来进行计算，能够设置某个分辨率范围内的字体大小的变化范围。关于兼容性，Android4.x开始支持，现在市场上低端Android机已经很少了，几乎不用考虑。

@charset "UTF-8";

$vm_fontsize: 16 * 2;

@function rem($px) {
  @return ($px / $vm_fontsize ) * 1rem;
}

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
      font-size: calc(81.25% + 2 * (100vw - 320px) / 55);
      font-size: calc(13px + 2 * (100vw - 320px) / 55);
  }
}

@media screen and (min-width: 375px) {
  html {
      /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
      font-size: calc(100% + 2 * (100vw - 375px) / 37);
      font-size: calc(16px + 2 * (100vw - 375px) / 37);
  }
}
@media screen and (min-width: 412px) {
  html {
      /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
      font-size: calc(112.5% + 4 * (100vw - 412px) / 586);
      font-size: calc(18px + 4 * (100vw - 412px) / 586);
  }
}
@media screen and (min-width: 600px) {
  html {
      /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
      font-size: calc(125% + 4 * (100vw - 600px) / 400);
      font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
      /* 1000px往后是每100像素0.5px增加 */
      font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
      font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}

这里提供一个🌰 http://frontjs.cc/demo/vwrem/mindex.html

就总结这么多啦，有问题欢迎留言