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（修改完配置后需要重新启动编辑器才能生效）：

 

 3.扩展flexible

https://github.com/amfe/lib-flexible

vw+rem布局

1.原理

由于rem实现时，我们需要借助js，为解决这个问题，我们将rem布局原理中，当前视口宽使用100vw表示，代替使用js计算，可以得到：

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

vw+rem布局是将根元素使用vw单位表示，而其他容器使用rem单位表示。适用于更改老项目的布局方式。

如果是新项目，没有历史包袱，且浏览器的兼容性非常好则推荐使用vw布局。

vw布局

vw布局即将根元素的font-size属性和容器的width/height属性都使用vw单位。

计算出测量的值对应的vw单位的值：？vw = 100vw * 容器测量的大小px / 设计图的宽px

vscode中的插件px2vw可帮助将px数值转为vw数值

rem布局、vw布局以及rem+vw布局的选择：

优先使用ve布局方案，如果条件不允许（比如浏览器不兼容vw）,再选择rem方案。

修改历史项目的时候，如果该项目使用的是rem布局，可以使用vw+rem方案修改。