课程名称： 前端工程师2022版
课程章节：rem 和 vw 布局
主讲老师：Alex
课程内容：
今天学习的内容包括：
2-1 rem 布局方案
1.原理：
宽高比不变
1rem=html字体大小
设置html字体大小（此处字体只用于计算，不用来显示，显示的字体单独在css中设置)
当屏幕变化时改变html的字体大小
2.实现
750px/96px 宽高比不变->750rem/96rem 宽和高可以随着屏幕大小的变化而变化
1rem= html的字体大小 当屏幕变化时，修改html的字体大小
不用担心字体过大或过小，这里只是用来计算，不用来显示（谷歌浏览器字体低于12px显示不正常）
viewWidth/750px (设计稿的尺寸）= ?/10px（自己选的rem大小）
?=viewWidth*10px/750px = viewWidth/75
自动将px转换为rem的插件：px2rem->Open User Settings->输入px2rem->配置一下根目录font-size(选的什么就改什么）
width:750px;（会弹出自动换算的部分）
安装px2rem插件，修改配置后重启编译器生效
3.拓展
flexible（淘宝客服解决方案）网址：https://github.com/amfe/lib-flexible
解决了1px边框问题
vw在大多数方面已经代替了rem,但是有的公司还是会要求用rem，所以两个都学一下，推荐vw
2-2 vw+rem 布局方案
1.原理
vw+rem布局(使用场景:用于改写，优化，如果是新的项目，没有任何包袱，兼容性也比较好，我们推荐用vw布局，如果是优化老的项目，推荐vw+rem布局，因为全都改为vw布局，工作量太大）
viewWidth=100vw(1vw是百分之一视口宽）
原理：100vw/750px=?vw/10px （750px和10px不是固定的）
?vw=10px*100vw/750px
2.实现
‘font-size=1.33333vw
补：能用CSS实现动画就不要用JS实现，因为JS会用到DOM，会卡，效益会差一些
2-3vw布局
//计算出测量的值对应的vw单位的值
//测量px/750px(设计稿宽度）=？vw/100vw
//?vw=100vw*测量px/750px
插件：px2vw
优先使用vw布局，如果条件不允许（比如浏览器不兼容vw),在选择rem方案
修改历史项目的时候，如果该项目使用的是rem布局，可以使用vw+rem方案修改
课程收获：
优先使用vw布局，如果条件不允许（比如浏览器不兼容vw),在
选择rem方案
修改历史项目的时候，如果该项目使用的是rem布局，可以使用vw+rem方案修改
注意：
1、rem：根据根元素的font-size值计算的，
2、em：先根据自身设置的font-size属性值计算，如果自身没有设置font-size属性，就向前查找它祖辈元素设置的font-size属性值计算。
今天学习课程共用了1小时4分钟，太容易走神了，争取明天学习不走神