移动web笔记 | 地址 |
---|---|
🔥移动web第一天 | https://blog.csdn.net/weixin_46862327/article/details/123644225 |
🔥移动web第二天 | https://blog.csdn.net/weixin_46862327/article/details/123644726 |
🔥移动web第三天 | https://blog.csdn.net/weixin_46862327/article/details/123646874 |
🔥移动web第四天 | https://blog.csdn.net/weixin_46862327/article/details/123905728 |
🔥移动web第五天 | https://blog.csdn.net/weixin_46862327/article/details/123920936 |
移动web第六天
一、vw / vh
1、什么是vw、vh
vw、vh相对单位,相对视口的尺寸计算结果
vw:viewport width
- 1vw = 1/100视口宽度
vh:viewport height
- 1vh = 1/100视口高度
2、vw单位尺寸
-
确定设计稿对应的vw尺寸 (1/100视口宽度)
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
-
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
3、vh单位尺寸
-
确定设计稿对应的vh尺寸 (1/100视口高度)
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
-
vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
4、vw/vh 混用
思考:开发中,会不会vw和vh混用呢?
vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。