rem和vw布局

rem布局

1.rem布局的原理

我们使用rem布局主要是为了实现容器的宽高可以等比例放大或缩小。我们用rem作为容器宽和高的单位，rem是相对单位，1rem=html字体的大小，所以我们只需要在屏幕发生变化时，修改html的字体大小就能实现等比缩放的效果。

那么当前视口宽所对应的html的字体应该是多大呢？

当前视口html字体px = 设计图html的字体大小px  * 当前视口宽px / 设计图的视口宽px

2.rem布局的实现

        //rem布局实现:更改html字体大小
        //1.获取dom
        const docEl = document.documentElement;
        const setHtmlFontSize = ()=>{
          //获取视口宽
          const viewWidth = docEl.clientWidth;
          //根据计算公式得到字体大小
          docEl.style.fontSize = `${viewWidth/75}px`;
        };
      //每次刷新时调用setHtmlFontSize函数
      setHtmlFontSize();
      //当触发resize事件时调用setHtmlFontSize函数
      window.addEventListener('resize',setHtmlFontSize,false);

我们在设置宽高时，使用rem作为单位。vscode中有个插件叫‘px2rem’可以帮助生成px单位换算成rem单位：

此时修改配置，1rem = 10px（修改完配置后需要重新启动编辑器才能生效&#