GX博客

传统的像素布局不能直接适配各种尺寸的移动设备屏幕，为了解决这一问题，目前有两种流行的布局方式：rem 布局和响应式布局（或许它们还有其它叫法）。对于需要在不同尺寸设备都想有更好的展示效果的，可以考虑响应式布局。但它的设计成本比较高，需要考虑多端的展示效果。对于移动端优先的情况，使用 rem 布局是较为便捷的实现。本文将会介绍基于 flexable.js 的移动端适配方案。

viewport meta

下面是一个在 h5 中最常见的 meta 标签之一：

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

上面 meta 标签做的事情就是告诉浏览器，让它将视口设置为设备宽度，并且初始化缩放比例为 1（还有两个次要的，最大缩放比例为 1，禁止用户缩放），而不是使用如 980px 这样的虚拟视口宽度和横向滚动条来显示页面。

flexable.js

flexable.js是阿里巴巴使用的一个移动端适配方案脚本。它做了以下事情：

1. 设置 body 字体大小为 window.devicePixelRatio * 12 px
2. 设置 html 根元素字体大小为可视区域宽度逻辑像素的 1/10
3. 在页面加载完毕、历史记录前进后退、窗口 resize 时候重新设置根元素字体大小
4. 检查是否支持 0.5px，支持则在根元素添加类名 hairlines

注：旧版本 flexable.js 会在根元素设置 data-dpr 属性，以标识浏览器的 dpr 值。

与设计稿配合

直接使用 rem 编写样式会比较难理解，我们可以使用如 px2rem 这样的插件将样式表中的 px 单位转换成 rem 单位。假如设计稿为 750px，则设置 px2rem 的 rem 单位大小为 75（px）。最后转换后的 rem 单位满足 flexable.js 的 1/10 设置比例，页面始终按照设计稿比例占满屏幕宽度，即适应多端。

不同 dpr 下图片的显示问题

在像素密度高的屏幕下，我们希望加载更加高清的图片，下面分别为在 css 和 html 中的实现方法举例：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   /* 背景图加载 @2x 的高清图片，可使用 scss 封装成 @mixin */
}

<img
  src="https://www.leeguangxing.cn/images/contact.png"
  srcset="https://www.leeguangxing.cn/images/wxschedule.png 2x"
  alt=""
/>

更多关于 srcset 的介绍，可以参阅https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-srcset。