【学习打卡】第二天 前端工程师2022版 rem 和 vw 布局

课程名称： 前端工程师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分钟，太容易走神了，争取明天学习不走神