移动端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的适配方案，我再记下来。

原文地址：https://www.cnblogs.com/yangzhou33/p/8955625.html