CSS——vw和vh

vw和vh都是单位，是相对单位，相对于视口的尺寸进行计算，

vw：viewport width ，viewport height

1vw = 1/100视口宽度；1vh = 1/100视口高度。

只需要改单位，不用加入flexible.js就可以实现移动适配。

<!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和vh</title><style>* {margin: 0;padding: 0;}/* 1. vw = 1/100视口宽度 *//* .box {width: 50vw;height: 30vw;background-color: pink;} *//* 2. vh = 1/100视口高度 */.box {width: 50vh;height: 30vh;background-color: pink;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

假设是375*667的尺寸，如果用vw，就是某某px除以3.75vw，如果用vh，就是某某px除以6.67vh.

当然，用vw和vh得出来的盒子是一样大小的。

vw和vh不可以混用！

CSS——vw和vh相关推荐

Css单位px，rem，em，vw，vh的区别
Css单位px,rem,em,vw,vh的区别 px 像素 rem 根元素字体大小应用场景使用和修改 em 相对于父元素的大小 % 相对长度单位 vw.vh 相对于视口的单位视口 VW 相对于视 ...
CSS单位之vw、vh、vmin、vmax、%
CSS单位之vw.vh.vmin.vmax.% vm/vh:相对于视窗(Viewport)的高度和宽度. 1vh 等于1/100的视窗高度,1vw 等于1/100的视窗宽度. 视窗(Viewport) ...
CSS vw vh详解
CSS vw vh详解简介适配原理简介 vw vh是一种相对单位相对视口的宽度计算结果 vw viewport width 1vw=1/100视口宽度 vh viewport height 1 ...
css1vh等于多少px,css单位px、rem、em、vw、vh
css单位有两种分为相对单位和绝对单位绝对单位有:px 相对单位有:rem.em.vw.vh 下面我们一起来了解这几个单位吧. 1.rem:相对根元素字体大小来计算 1rem默认为16px当根元素有 ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
CSS尺寸单位px、em、rem、vw、vh以及%的区别
1. px px是像素单位.它是代表显示器上每一个显示的像素点,根据用户屏幕显示器的分辨率决定. 2. em em为相对单位,相对于当前元素内文本的字体尺寸.如果当前元素没有指定字体尺寸,那么以浏览器 ...
CSS基础：vw和vh是什么
前面聊两个相对的单位em和rem,不过随着时代的发展,em和rem对于有些移动端的内容显示虽然可以达到效果,所以又衍生了两个单位vw和vh. 两个也是相对单位不过其相对的是视口(非body标签定义的宽 ...
CSS 中的vh、vw单位
vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh: 视窗高度的百分比( 1vh 代表视窗的高度为 1%) vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh ...
css样式中的vw什么意思,css vw是什么单位
在css中,vw是一个长度单位,一个视口单位,是指相对于视口的宽度:视口会被均分为100单位的vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则"1vw=1920px/10 ...

CSS——vw和vh

CSS——vw和vh相关推荐

最新文章

热门文章