移动端font-size适配方案(续)

概述

以前写过一篇移动端font-size适配方案，可是在实践过程当中，仍是发现当时的思惟太局限了，视野太窄了，因此如今补充更新一下，记录下来，供之后开发时参考，相信对其余人也有用。

我上一篇博文主要有2个误区，下面我一一记下来。

这篇博文参考了移动端适配方案(下)。

适配方案

有多种适配方案：

1. 百分比布局：高度和宽度用百分比。因为高度和宽度的百分比是按照父元素尺寸的，因此改动父元素会使子元素发生变化，很是难以维护。
2. px布局：固定宽度，viewport缩放。就是所有用px，而后用js控制initial-scale的缩放比例。这样在不一样屏幕上面，页面都会按比例总体缩放，也比较方便维护。
3. rem布局：rem作度量单位，改font-size。

须要注意的是，若是只实现页面总体放大缩小的话，方法1和方法2的效果是同样的！！！

适配目的

我以前说，咱们的适配目的是：对于不一样的屏幕，页面只须要简单地放大或缩小便可。对于这个目的，上面的方法2和3都能达到效果。

可是，人类发明更宽的设备，并不仅是想看到更宽的字体或者更大的页面，而是想看到更漂亮的布局内容。而这才是响应式的精髓：根据不一样大小的屏幕展示不一样的内容给别人看！

因此从这一方面来看，方法2是远远不够的，因此咱们须要方法3，优势有2个：

1. 能够结合rem和px实现部份内容大小不变！
2. 能够用rem响应式的为不一样大小的屏幕展示不一样的布局！

目前我只了解到了方法3这个程度，方法3有个局限性，就是对dpr不能很好地适配，因此之后若是有更好的兼容dpr的适配方案，我再记下来。