HTML5教程

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

本文主要是介绍【学习打卡】第二天 前端工程师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分钟,太容易走神了,争取明天学习不走神

https://img3.sycdn.imooc.com/62ea8e7000015d2f09450469.jpg

https://img2.sycdn.imooc.com/62ea8e7000018b6819200915.jpg




这篇关于【学习打卡】第二天 前端工程师2022版 rem 和 vw 布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!