一、VW和VH

1.2、VW/VH是什么

1.2.1、vw/vh是一个相对单位（类似em和rem相对单位）

VW是: viewport width视口宽度单位
VH是: viewport height视口高度单位

1.3、相对视口的尺寸计算结果

1vw=1/100视口宽度
1vh=1/100视口高度
例如:当前屏幕视口是375像素，则1ww就是3.75像素，如果当前屏幕视口为414，则1vw就是4.14像素
注意事项：和百分比有区别的，百分比是相对于父元素来说的，而VW和VH总是针对于当前视口来说的

1.4、VW/VH怎么使用

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

1.4.1、如何还原设计稿

前提:我们设计稿按照 iPhone678来设计，有个盒子是50像素*50像素的，如何使用VW呢？
分析
①:设计稿参照 Iphone678，所以视口宽度尺寸是375像素（像素大厨切换到2X模式）
②:那么1W是多少像素？375px/100=3.75px
③:我们元素的目标是多少像素？
50px * 50px
④:那么50*50是多少个vw？
50/3.75=13.3333VW
因为设计到大量除法，还是适应LESS搭配更好点。
我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所以开发中使用vw就基本够用了 vh很少使用
兼容性:网站:https://caniuse.com/

1.6、px转成vw插件

VW和VH移动端布局相关推荐

如何利用vw+rem进行移动端布局
前言因为在公司,只有一个前端,在做移动端布局的时候.利用px进行布局,发现,需要进行各种手机的适配. 所以在开发第二版的时候,想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同 ...
vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...
移动端布局-px转vw、vh
移动端布局长度单位转换一.场景描述二.实现方式 1.安装 2.配置 3.其他配置三.多规则配置一.场景描述一般我们做移动端网页开发时,设计稿一般都是固定的宽高的(比如750*1334).但是 ...
21. 【移动端Web开发之vw和vh布局】
文章目录 [移动端Web开发之vw和vh布局]前端小抄(21) 一.vw和vh 1.1 移动端布局 1.2 vw/vh是什么? 1.3 vw/vh怎么用? 1.4 vw注意事项 1.5 VSCode ...
css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
布局：px to vw、vh
一.背景: vue项目,移动端实现自适应布局二.选用方案: 视口单位(viewport units): 三.理解视口单位: 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3 ...
微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
没接触过 JavaScript.CSS.HTML的小白直接开始接触微信小程序的开发,在了解了各个部分的作用以后,布局的时候就发现:怎么这么多单位??? px.rem.rpx.vw.vh.n% 为了不总 ...

VW和VH移动端布局

一、VW和VH

1.2、VW/VH是什么

1.2.1、vw/vh是一个相对单位（类似em和rem相对单位）

1.3、相对视口的尺寸计算结果

1.4、VW/VH怎么使用

1.4.1、如何还原设计稿

1.6、px转成vw插件

VW和VH移动端布局相关推荐

最新文章

热门文章

VW和VH移动端布局

一、VW和VH

1.2、VW/VH是什么

1.2.1、vw/vh是一个相对单位（类似em和rem相对单位）

1.3、 相对视口的尺寸计算结果

1.4、VW/VH怎么使用

1.4.1、如何还原设计稿

1.6、px转成vw插件

VW和VH移动端布局相关推荐

最新文章

热门文章

1.3、相对视口的尺寸计算结果