index.html中

注意设置的 clientWidth / 375 的分母的值 375 为对照设计稿的宽度比例取值的大小

<script>
    (function(doc, win) {
        var _root = doc.documentElement,
            resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
            resizeCallback = function() {
                var clientWidth = _root.clientWidth,
                    fontSize = 10;
                if (!clientWidth) return;
                if (clientWidth < 640) {
                    fontSize = 10 * (clientWidth / 375);
                } else {
                    fontSize = 16;
                }
                _root.style.fontSize = fontSize + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvent, resizeCallback, false);
        doc.addEventListener('DOMContentLoaded', resizeCallback, false);
    })(document, window)
  </script>

• 使用时

// vue
<div class="phone"></div>
// css
.phone {
  width: 20rem; // 20 * 10 = 200px 以宽度为 375 iphone 6 的设计稿宽度200px对比设置改值即可
}