H5自适应页面的一种可行性方案

前言

由于各种终端屏幕风格，大小迥异，由此而生衍生出了自适应页面设计。如果我们需要在各种机型上显示的风格比例一致，而解决屏幕大小不同显示内容不同的问题的话，我们需要对各种屏幕比例做适配。本文就该问题分享一种可行性方案。

由于以前做的移动端页面大部分为小程序页面，小程序采用相对像素(rpx)实现响应式适配。故本文也采用类似思想(rem)。

1. rem是什么

在W3C官网上是这样描述rem的——“font size of the root element”

即相对根节点（html)的字体大小,那么解决方案的思路就立马来了。根据不同的屏幕大小，设置不同的html字体大小，这样其他使用rem单位的元素即会随之自适应的改变大小。

2. 计算根节点(html)字体大小

2.1 JS方案

思路就是使用js获取窗口宽度，然后根据宽度计算对应的font-size。根据一般常识，js为了不影响页面体验，应在文档末尾添加。但此处为了避免HTML渲染完成后，使用JS动态修改字体而造成的页面抖动问题。我们应该将该JS元素节点放置于header底部，并内联到html文档里面。例如

在Vue中直接修改template.html即可

<script type="text/javascript">
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
      if (!doc.addEventListener) {
        return;
      }
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      recalc()
    })(document, window)
</script>

该代码段监听页面尺寸改变事件，根据对应窗口大小(clientWidth)除以一个基准(750),进而调整html的font-size。在本例下，375的屏幕中1rem=50px。

2.2 CSS方案

采用媒体查询，适配不同宽度，代码略。

Vue配置px自动转rem

postcss-plugin-px2rem介绍

A plugin for PostCSS that generates rem units from pixel units.

也就是说，使用该插件可以自动的将你写px单位转为rem单位，而且不用担心污染问题，因为可以设置选择黑名单。

安装postcss-plugin-px2rem

yarn add postcss-plugin-px2rem

配置

待补充

总结

该方法只适用于对于不同屏幕的屏幕显示相同的比例，对于那些内容式网站则要避免使用该方法。此时，用户选择更多屏幕的目的不是为了看到更大的字体，而是希望能够看到更多的内容。

参考文献

简单粗暴的移动端适配方案 - REM

版权声明: （https://www.thinkmoon.cn/post/830）
本文首发于指尖魔法屋-H5自适应页面的一种可行性方案
转载或引用必须申明原指尖魔法屋来源及源地址！