课程名称： 前端工程师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分钟，中间走神了好久😨💣今天依然状态不好，不知道怎样才能调整好
随时随地看视频
