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

 继续浏览关于 响应式布局 的文章

 本文最后更新于:2020/04/19 11:04:43,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > H5自适应页面的一种可行性方案