使用 rem dpr 实现移动端的自适应布局应该注意的问题

我们在上一篇  《使用 rem 实现移动端的自适应布局》介绍了如何使用 rem 实现移动端自适应布局的问题，然而在实际项目中还有许多问题需要解决。前端之所以称为前端，就是冲锋陷阵的前方，作品直接对接真实用户，前端产品的质量直接影响用户的体验，也直接体现了整个产品的质量。所以对于前端工程师来说，要把产品做到尽善尽美。

首先看看页面字体问题，根据之前做法，页面中的字体大小可以根据设计稿的大小，通过  px2rem 这个方法得到其相对大小，但是由于我们采用的rem的基准值是屏幕宽度（如 6s 的 375px），这个值比较大，而页面文字的font-size值一般都比较小，计算后的相对值就会很小（如16 / 375 ≈ 0.04266667），这会导致最后显示的字体大小不准确！

其实这个问题可以通过缩小基准值（html 标签的 font-size）得到解决，具体如下(缩小40倍)：

var el = document.getElementsByTagName("html")[0];
rem = el.clientWidth / 40;
el.style["fontSize"] = rem + "px";

然后 sass 中设定的基准值也要跟着缩小

$design-doc-width:750px; //视觉稿采用宽度
$base-rem-value:$design-doc-width / 40; // 基准值
@function px2rem($px:0px) {
    @return $px / $base-rem-value * 1rem;
}

然而大多数产品经理并不认同这种做法，他们的需求是无论在任何屏幕大小的设备上，所显示的字体大小都是统一的（都是16px），针对这种需求，对于字体而言，