1208 VW/VH

VW/VH方案

相对单位，相对视口尺寸计算结果，按照屏幕不同比例，长度不同

vw:viewport width

1vw=1/100视口宽度

vh:viewport height

1vw=1/100视口高度

    <style>* {padding: 0;margin: 0;}.box {width: 50vw;height: 30vw;background-color: pink;}</style>
</head>
<body><div class="box"></div>
</body>

vw单位尺寸=px单位数值/（1/100视口宽度）

.box {width: (68/3.75vw);height: (29/3.75vw);background-color: aquamarine;
}

vh单位尺寸=px单位数值/（1/100视口高度）

.box2 {width: (68/6.67vh);height: (29/6.67vh);background-color: aqua;
}

宽高不混用

1208 VW/VH相关推荐

css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
css3自适应布局单位vw,vh你知道多少？
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
vw vh vm CSS长度单位
vw 相对于视口的宽度.视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度 vh 相对于视口的高度.视口被均分为100单位的vh(即浏览器可视区) 100vh = 可视区 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
css中的vw/vh与%
css中的vw/vh与% 其他博主讲这个的多,但是我觉得没有划重点. 首先来说说vw/vh,将浏览器的宽高等分为100,浏览器视口的宽高单位.也就是说能智能的计算,包括外接显示器.可以实现元素的自适应 ...
vw/vh：移动适配之vw/vh(使用方法)
使用vw/vh布局,可以实现视口宽度不同,网页元素宽高等比缩放效果,比rem的优势在于,在代码中直接写vw/vh就能实现移动适配效果,不用引入js文件,比rem更简单,但有兼容问题,目前大厂已经转型到 ...
可视化项目使用vw/vh布局进行适配
vue写可视化项目,使用vw/vh适配首先安装插件 npm install postcss-px-to-viewport --save-dev 在vue.config.js文件里面配置一下属性以及代 ...
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...

1208 VW/VH

VW/VH方案

1208 VW/VH相关推荐

最新文章

热门文章