【移动端Web开发之vw和vh布局】前端小抄(21)

本学习笔记是个人对 Pink 老师课程的总结归纳，转载请注明出处！

一、vw和vh

1.1 移动端布局

移动端布局 — flex 布局

为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放

需要移动端适配有如下方案：

（1）rem

市场比较常见：

需要不断修改 html 文字大小
需要媒体查询 media
需要 flexible.js

（2）vw / vh

未来的趋势：

省去各种判断和修改
代表：B站……

1.2 vw/vh是什么？

vw/vh 是一个相对单位（类似 em 和 rem 相对单位）
- vw 是：viewport width 视口宽度单位
- vh 是：viewport height 视口高度单位
相对视口的尺寸计算结果
- 1vw = 1/100 视口宽度
- 1vh = 1/100 视口高度

例如：

当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。

注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和 vh 总是针对于当前视口来说的。

1.3 vw/vh怎么用？

超级简单，元素单位直接使用新单位 vw/vh 即可
因为 vw/vh 是相对单位，所以不同视口（屏幕）下，宽高一起变化完成适配

直接使用即可！

【案例】

div {width: 10vw;height: 10vh;background-color: pink;
}

如何还原设计稿？

前提：我们设计稿按照 iPhone 6/7/8 来设计，有个盒子是 50px * 50px 的，如何使用 vw 呢？

分析：

设计稿参照 iPhone 6/7/8，所以视口宽度尺寸是 375px（像素大厨切换到 2x 模式，因为 UI 设计图是 750px 的）
那么 1vw 是多少像素？

375px / 100 = 3.75px
我们元素的目标是多少像素？

50px * 50px
那么 50 * 50 是多少个 vw？

50 / 3.75 = 13.3333vw

在像素大厨等 UI 软件中，直接选择 vw 单位然后测量即可，不用人工计算。

1.4 vw注意事项

因为涉及到大量除法，还是适应 LESS 搭配更好点
我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用 vw 就基本够用了。vh 很少使用。（高度变化时，我们一般不需要元素大小进行变化，所以用不到 vh）
兼容性，网站：https://caniuse.com/

1.5 VSCode px->vw 插件

记得进行设置：

21. 【移动端Web开发之vw和vh布局】相关推荐

移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
移动WEB开发之-REM（rem）布局
目录移动WEB开发之REM布局 rem基础 rem单位媒体查询什么是媒体查询媒体查询语法规范 1.mediatype 查询类型 2.关键字 3.媒体特性 4.媒体查询书写规则 less 基础 ...
18. 【移动Web开发之rem适配布局】
文章目录 [移动Web开发之rem适配布局]前端小抄(18) 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2 ...
「学习笔记」移动Web开发之rem适配布局10
「学习笔记」移动Web开发之rem适配布局10 一.rem单位 1.1 rem 单位二.媒体查询 2.1 什么是媒体查询 2.2 语法规范 2.2.1 mediatype 查询类型 2.2.2 关键 ...
17. 【移动Web开发之flex布局】
文章目录 [移动Web开发之flex布局]前端小抄(17) 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验二.flex布局原理 2.1 布局原理三.flex布局父项常见属性 ...
「学习笔记」移动Web开发之flex布局9
「学习笔记」移动Web开发之flex布局9 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验二.flex布局原理 2.1 布局原理三.flex布局父项常见属性 3.1 常见父项 ...
WEB开发之HTML与CSS够用即可-庞永旺-专题视频课程
WEB开发之HTML与CSS够用即可-113人已学习课程介绍讲解常用的HTML标签与CSS样式.这些常用的HTML标签与CSS样式都是本人多年从业经验的总结.只要熟练我总结的HTM ...
WEB开发之JavaScript与jQuery够用即可-庞永旺-专题视频课程
WEB开发之JavaScript与jQuery够用即可-49人已学习课程介绍 JavaScript与jQuery完美结合发挥前端编写代码的优越性,提高开发速度.让代码理简洁.解决市面 ...
Python Web开发之WSGI
Python Web开发之WSGI WSGI(全称Web Server Gate Interface,Web服务器网关接口)是Python为了规范和简化Web服务开发过程,定义了一种Web服务器和应用 ...

21. 【移动端Web开发之vw和vh布局】

文章目录