css3新单位vw、vh、vmin、vmax的使用介绍
1,vw、vh、vmin、vmax 的含义
(1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
(2)具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
2、vw、vh 与 % 百分比的区别
(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
3、vmin、vmax 用处
做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
4、一个简单的样例
视窗(Viewport)单位除了可以用来设置元素的宽高尺寸,也可以在文本中使用。下面使用 vw 设置字体大小来实现响应式文字。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hangge.com</title><style>html, body, div, span, h1, h2, h3 {margin: 0;padding: 0;border: 0;}.demo {width: 100vw;font-size: 5vw;margin: 0 auto;background-color: #50688B;color: #FFF;}.demo2 {width: 80vw;font-size: 5vw;margin: 0 auto;background-color: #ff6a00;}.demo3 {width: 50vw;height: 50vh;font-size: 1vw;margin: 0 auto;background-color: #ff006e;color: #FFF;}</style></head><body><div class="demo"><h1>宽度100%, 字体5%</h1></div><div class="demo2"><h2>宽度80%, 字体5%</h2></div><div class="demo3"><h3>宽度50%, 高度50%, 字体1%</h3></div></body>
</html>
5、实现完整覆盖的遮罩层
有时为了突出弹出框,或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩,这个使用 vw、vh 就可以很轻易地实现。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hangge.com</title><style>html, body, div, span, button {margin: 0;padding: 0;border: 0;}button {width: 120px;height: 30px;color: #FFFFFF;font-family: "微软雅黑";font-size: 14px;background: #28B995;}#mask {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: #000000;opacity: 0.5;display: none;}</style></head><body><button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button><div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div></body>
</html>
css3新单位vw、vh、vmin、vmax的使用介绍相关推荐
- 单位vw,vh,vmin,vmax的用法
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值
- CSS3新单位vw,vh,vmin,vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
- css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
- 【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位 单位 计算方式 简介 px 标准像素 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
- 20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
- CSS3的新单位vw、vh、vmin、vmax
原文链接 一.基本说明 vw.vh.vmin.vmax的含义 (1)vw.vh.vmin.vmax是一种视窗单位,也是一种相对单位.它们相对的不是父节点或者页面的根节点,而是由视窗(Viewport) ...
- CSS3视窗单位vw、vh、vmin、vmax说明
vw.vh做为CSS3中的新单位,已经出来挺久的了,这里也我个人也做一下详细的总结. 说明 vw.vh.vmin和vmax是CSS3中的新单位,是一种视窗单位,也是相对单位.它们的大小都是由视窗大小来 ...
- css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
- css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
最新文章
- 41岁程序员被裁,北京有1500万房产,程序员:我该不该退休?
- 与vnpy相关的有用博客网址
- 每天最少编码1000行
- 删除web文本框中的内容需要或者文本框失去焦点,点击“Backspace”键时页面回退,屏蔽页面回退键的方法
- java buffalo_随你怎么玩!Buffalo 网络硬盘新潮流
- Python二级笔记(6)
- 一个通用的VB磁盘文件搜索引擎类
- mysql+enable+sql+log_MySQL -- redolog + binlog
- 认知计算、大数据及人工智能革命
- 原型设计工具——axure认识与使用
- 现场总线CANopen设计与应用
- 北京知产局:鼓励当事人用区块链,获取、固定知识产权纠纷证据
- 手机卫星定位系统_北斗卫星已覆盖130国上空,那手机上能搜到吗?北斗女神这样比喻...
- ROS2—小海龟仿真器基础使用
- php解决时间2038问题,PHP实例:关于PHP转换超过2038年日期出错的问题解决
- 做软件测试工程师真的很容易吗
- adreno660 gpu相当于mali 什么型号的gpu
- 32g的u盘速度测试软件,傻乎乎买U盘被坑篇:USB2.0速度究竟有多低,闪迪酷晶系列快测!...
- 米兰愈加关怀的是尼昂的伤情
- OpenCV将两图片进行混合,达到两张图片合并成一张图片的效果