CSS vw / vh 移动端布局

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插件