移动端布局(大结局)之vw和vh

vw/vh是什么

vw/vh是一个相对单位(类似em和rem相对单位)

• vw: viewport width 视口宽度单位
• vh: viewport height 视口高度单位

相对视口尺寸计算结果

• 1vw=1/100视口宽度
• 1vh=1/100视口高度

例如: 当前视口为375px,则1vw就是3.75px.

注意事项:

和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的.

做了一个10vw和10vh的试试看效果:

果然是跟着视口大小变化的,感觉比rem要方便很多啊...也不用媒体查询了

我们下载一个软件:像素大厨

vw注意事项:

• 因为涉及到大量除法,还是适应less搭配更好点
• 我们本质是根据视口宽度来等比例缩放页面元素的高度和宽度的,所以开发中vw就基本够用了,vh很少使用.

推荐的插件:px2vw

可以自动帮我们计算好vw的值,非常方便.

老师做了个案例,但是没有素材.

html+css部分,完美结束啦!!!

复习一遍就开启JS！