课程名称： 前端工程师2022版

课程章节：rem 和 vw 布局实战及总结

主讲老师：Alex

课程内容：

今天学习的内容包括：

3-1 rem 慕课网首页布局

目的：实现高度宽度等比例变化

实现：1.通过js计算出当前屏幕大小，然后根据屏幕大小计算出当前html的字体大小

          2.把想要等比例缩放的 px 单位 换成 rem 单位（并不是所有的都换成 rem ）

           flex布局默认允许压缩若不想压缩，

           flex-shrink:0;

           文字尽量不要变化

           小图标可以变化

           图片直接设置百分比即可

           多种结合使用，每个都有适合的情景，自己分析，怎么简单高效怎么用

3-2 rem 和 vw 混合改写

直接写一个html的font-size:1.33333vw 替换原先的 js

( 100vw/750px=?vw/10px     ?vw=10px*100vw/750px )

课程总结

rem 和 vw 布局 都是实现等比例缩放

• rem 布局方案：

需要等比例缩放的使用 rem 单位，1rem = 10px

viewWidth / 750px = ? / 10px

？= viewWidth * 10px / 750px

(viewWidth 是视口的宽度（当前屏幕大小），？是html 标签的字体大小）

代码实现：

{
            const docEL = document.documentElement;

            const setHtmlFontSize = () => {
                const viewWidth = docEL.clientWidth;
                // 1rem = 10px
                docEL.style.fontSize = `${viewWidth/75}px`;
            };

            // 何时执行根据项目来
            //页面刷新执行
            setHtmlFontSize();
            //屏幕发生变化执行
            window.addEventListener('resize',setHtmlFontSize,false);
        }

🌈这个方案已经过时，可以作为备选

• vw + rem 布局方案

HTML的字体大小使用vw单位

html{
    /*100vw*10px/750px*/
    font-size:1.3333vw;
}

需要等比例缩放的使用rem单位

公式：

view Width /750px = ?px / 10px
100vw / 750px = ?vw / 10 px
?vw = 10px *100vw / 750px          (?vw 是 html 标签的字体大小，单位vw)

🌈一些老项目会用此方式改写

• vw 布局方案

需要等比例缩放的使用 vw 单位

测量px / 750px = ?vw/100px
?vw = 测量px * 100vw / 750px
(测量px 是从设计稿上测量的值，单位px,?vw 是其对应的vw 值)

🌈要现等比例缩放，推荐使用此方案

课程收获：

知道了等比例缩放布局的几种布局方式，新项目比较推荐vw 布局，老项目改写使用rem+vw 布局方式，浏览器比较老的不支持vw 的使用 rem 布局方式

今天学习课程共用了20分钟，写练习用时30分钟，中间走神了好久😨💣今天依然状态不好，不知道怎样才能调整好