CSS单位之vw、vh、vmin、vmax、%

vm/vh：相对于视窗（Viewport）的高度和宽度。

1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vmin/vmax：取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。

浏览器视窗大小为 window.innerWidth=1920px，window.innerHeight=1080px，那么，1vmin=1080px/100=10.8px; 1vmax=1920px/100=19.2px。

%：相对于父元素的长度高度。

注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。
position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。

下面通过一个例子来说明vmin及vmax：

<!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>Document</title><style>* {padding: 0;margin: 0;}.container {width: 100vmin;height: 100vmin;background-color: red;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

效果如下：

下面是用一个例子来说明vmin和vw及%的区别：

<!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>Document</title><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;}body {display: flex;justify-content: space-between;}.container1 {width: 30vmin;height: 30vmin;background-color: red;}.container2 {width: 30vw;height: 30vw;background-color: blue;}.container3 {width: 30%;height: 30%;background-color: green;}</style>
</head>
<body><div class="container1"></div><div class="container2"></div><div class="container3"></div>
</body>
</html>

效果如下：

CSS单位之vw、vh、vmin、vmax、%相关推荐

20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
单位vw,vh,vmin,vmax的用法
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
css中的vw/vh与%
css中的vw/vh与% 其他博主讲这个的多,但是我觉得没有划重点. 首先来说说vw/vh,将浏览器的宽高等分为100,浏览器视口的宽高单位.也就是说能智能的计算,包括外接显示器.可以实现元素的自适应 ...
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...

CSS单位之vw、vh、vmin、vmax、%

CSS单位之vw、vh、vmin、vmax、%

CSS单位之vw、vh、vmin、vmax、%相关推荐

最新文章

热门文章