vw/vh

是相对单位

vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度

vw单位尺寸

1.确定设计稿对应的vw尺寸（1/100视口宽度）

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）

2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

确定设计稿对应的vh尺寸（1/100视口高度）
- 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸（1/100 视口高度）
vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

vw与vh不能混用。因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

例子

vw

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vw适配</title><link rel="stylesheet" href="./demo.css">
</head>
<body><div class="box"></div>
</body>
</html>

Less文件：

// out: ./demo.css* {margin: 0;padding: 0;
}
/* 写一个68×29的盒子.设计稿宽度为 3751 vw = 3.75px */.box {width: (68 / 3.75vw);height: (29 / 3.75vw);background-color:red;
}

vh

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vh</title><link rel="stylesheet" href="./demo.css">
</head>
<body><div class="box"></div>
</body>
</html>

Less文件：

// out: ./demo.css
* {margin: 0;padding: 0;
}/* 写一个68×29的盒子.设计稿高度为 6671 vh = 6.67px */.box {width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: #246;}

移动适配-vw/wh相关推荐

uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
theme: smartblue highlight: dark 创建项目创建后的项目此处插入一个坑亦可以使用uniapp vue-cli 创建项目 vue create -p dcloudio ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）
因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...
H5移动端适配 rem 和 vw 的区别
当我们做H5移动端项目或移动官网时,要求要根据不同机型做等比例缩放一.rem适配 rem是相对单位,是相对HTML根元素的 font-size 来决定它的大小,1rem 就等同于 html标签fon ...
使用vw或者rem进行移动端适配
安装插件进行移动端适配 VW方案适配先把vue脚手架升级到最新 npm i -g @vue/cli@latest 安装 postcss-px2vp npm i -D postcss-px2vp 插件 ...
chrome控制台如何把vw显示成px_【CSS】rem，em，px的区别和使用场景
前端潮咖点击上面蓝字,关注我们! 关注关注前端潮咖,每日精选好文作者:大前端小菜鸟来源:cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/v ...
chrome控制台如何把vw显示成px_【CSS】679 rem，em，px的区别和使用场景
作者:大前端小菜鸟来源: cnblogs.com/hyns/p/12380944.html 作rem布局原理深度理解(以及em/vw/vh) 一.前言我们h5项目终端适配采用的是淘宝那套<Fl ...
移动端开发四种适配方案详解
web移动端开发 0.思维导图 1.前端开发常用单位 2.视口 2.1 视口定义 2.2 移动端视口宽度980 2.3 设置移动端不自动缩放网页尺寸 3.移动端常见适配方案 1.媒体查询@media ...
解决Rem的适配问题
rem的适配知道几个基本的概念 11rem的值永远等于根元素(html)的font-size属性值的大小 2浏览器默认的font-size值的大小是16px 3下文中rem.js的作用 = flex ...

移动适配-vw/wh

vw/vh

vw单位尺寸

vh单位尺寸

例子

vw

vh

移动适配-vw/wh相关推荐

最新文章

热门文章