用rem灵活实现自适应布局

前言

最近项目上有个需求，不仅需要自适应各种尺寸的屏幕，还需要在浏览器窗口缩放到一定程度时，不再自适应，而是固定一个比例，通过滚动条查看。目前的主流的自适应方案主要就是vw 和 rem，就尝试着从这两方面入手。

vw是如何实现自适应布局的？

vw表示视口的宽度，1vw就表示当前视口宽度的百分之一。所以它只取决于浏览器的宽度，随着浏览器宽度的减少会一直缩小，显然并不符合需求。

rem是如何实现自适应布局的？

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。因此可以通过控制px字号字号来控制自适应的程度。

思路

通过监听浏览器缩放来控制根元素的px字号

实现代码

新建rem.js

//rem.js
export default function resizeFontsize() {
  (function(win, doc) {
    function change() {
      if (doc.documentElement.clientWidth > 1230 && doc.documentElement.clientWidth <= 2304) {
        doc.documentElement.style.fontSize = (16 * doc.documentElement.clientWidth) / 1920 + 'px';
      } else if (doc.documentElement.clientWidth < 1230) { //小于一定宽度时保持不变
        doc.documentElement.style.fontSize = '10.125px';
      } else if (doc.documentElement.clientWidth > 2304) {
        doc.documentElement.style.fontSize = '19.2px';
      }
    }
    change();
    win.addEventListener(
      'resize',
      function() {
        change();
        console.log(document.documentElement.style.fontSize);
      },
      false,
    );
  })(window, document);
}

在main.js导入rem.ja

//main.js
import resizeFontsize from '@/scripts/utils/rem';
resizeFontsize();

最后

解决了自适应的问题，这个需求就实现了一半，剩下的难点就是根据项目页面实际情况解决问题。 接下来记录一下因为绝对定位position: 'fixed'# 引起的浏览器滚动问题。