最近在尝试移动端web的开发，但是以前做适配都是用的百分比，现在已经不能满足我的需求了。适配问题成了一个难题。

适配方案

常用的适配方案是：%、rem、flex、vw、em。

我个人更倾向于rem搭配%和flex食用，美滋滋~~😎

实现方案

去浏览器上搜一搜就会发现，当前前端大环境下，各式各样的适配方案非常多。总结起来，在目前，比较常用的实现方案有：

1. 当前React/Vue框架流行，市面上也针对这两种框架开发出了很多的插件帮助进行移动端适配，比如：postcss；
2. 还有相当一部分使用的是JS的方式进行计算，得出font-size，然后给html赋值；
3. 使用css媒体查询实现，根据不同的屏幕，给html赋值相对应的font-size，这样的缺点是很难覆盖到所有的机型。

上面的三种实现方案中，我更倾向于JS计算的方式：

<script>
    ( function (doc, win) {
        var docEl = doc.documentElement,
            bd = doc.body,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                // docEl.clientWidth 可能会获取不到
                var clientWidth = docEl.clientWidth || bd.clientWidth
                if (!clientWidth) return
                // docEl.style.fontSize = 100 * ( clientWidth / 750 ) + 'px' //iphone6 clientWidth=375
                docEl.style.fontSize = clientWidth / 20 + 'px' //iphone5 clientWidth=320
            }
        if (!doc.addEventListener) return
        win.addEventListener(resizeEvt, recalc, false)
        doc.addEventListener('DOMContentLoaded', recalc, false)
    } )(document, window)
</script>

在上面的代码中，我注释了以iPhone 6为标准的计算方式，是因为我个人更习惯于使用以iPhone 5为标准的使用方式。

在有UI还原度要求的项目中，还是推荐使用以iPhone 6为标准的计算方式。

参考网址

1. IMWeb社区-移动端适配大法.
2. 技术胖教学视频。