CSS vw / vh 移动端布局
移动端布局
- flex 布局 : 单维度适配
- 为了可以适配移动端,页面元素需要高度和宽度同时等比例缩放
- 移动端适配方案 rem 和 vw & vh比较
rem | vw/vh |
---|---|
需要不断修改html文字大小 | 省去各种判断和修改 |
需要媒体查询@media | 不需要@media |
需要flexable.js监测屏幕变化 | 不需要额外监测 |
什么是vw / vh
- vw 和 vh是一个相对单位(原理类似em或者rem)
- vw :viewport width 视口宽度单位
- vw :viewport height 视口高度单位
- 相对视口尺寸的计算结果:
1vw = 1 /100 视口宽度
1vh = 1 /100 视口高度
例如当前屏幕的视口宽度是375px,则1vw就是3.75px
什么是viewport - 视口.
vw / vh 怎么用
- 直接使用vw或者vh作为单位即可
- 屏幕尺寸变化时自适应比例
- 一般情况下元素宽高只使用vw即可实现等比例缩放(细想 😃)
div {
width: 10vw; /* 屏幕宽的1/10 */
height: 10vw; /* 屏幕高的1/10 */
background-color: #eee;
}
与px的换算(还原设计稿)
375px宽的屏幕里面有一个100px * 50px 的盒子怎么转换成vw单位呢?
div {
width: 13.3333vw; /* 100 / (375 / 100) */
height: 6.6667vw; /* 50 / (375 / 100) */
background-color: #eee;
}
vscode px2vw 插件
自动转换px到vw的vscode插件