css3新单位vw、vh、vmin、vmax的使用详解
1,vw、vh、vmin、vmax 的含义
- vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
- vh:视窗高度的百分比
- vmin:当前 vw 和 vh 中较小的一个值
- vmax:当前 vw 和 vh 中较大的一个值
2,vw、vh 与 % 百分比的区别
3,vmin、vmax 用处
4,浏览器兼容性
- Chrome:自 26 版起就完美支持(2013年2月)
- Firefox:自 19 版起就完美支持(2013年1月)
- Safari:自 6.1 版起就完美支持(2013年10月)
- Opera:自 15 版起就完美支持(2013年7月)
- IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
- Android:自 4.4 版起就完美支持(2013年12月)
- iOS:自 iOS8 版起就完美支持(2014年9月)
二、一个简单的样例
二、一个简单的样例
1,页面代码
<!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 >
2,效果图
三、实现完整覆盖的遮罩层
1,样例代码
<!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 >
2,效果图
四、实现居中显示的弹出框
1,弹出框大小随内容自适应
- 点击弹出按钮后,会显示一个在整个屏幕上居中显示的弹出框。
- 弹出框的大小根据内容的大小自适应(logo 图片),同时弹出框后面还有个覆盖整个屏幕的半透明遮罩层。
- 点击关闭按钮后,则隐藏弹出框。
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >hangge.com</ title >
< script type = "text/javascript" src = "js/jquery.js" ></ script >
< 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;
} .dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
} .dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
} .dialog-box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
} .dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
} .dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
} .dialog-body {
background-color: #fff;
}
</ style >
</ head >
< body >
< button onclick = "$('#dialogContainer').show();" >点击显示弹出框</ button >
< div id = "dialogContainer" class = "dialog-container" >
< div class = "dialog-box" >
< div class = "dialog-title" >居中弹出框</ div >
< a onclick = "$('#dialogContainer').hide();" class = "dialog-close" >关闭</ a >
< div class = "dialog-body" >
< img src = "logo.png" class = "demo-image" />
</ div >
</ div >
</ div >
</ body >
</ html >
2,弹出框大小随视窗大小改变
- 点击弹出按钮后,会显示一个在整个屏幕上居中显示的弹出框。
- 弹出框的大小不再由内容的大小决定,而是随视窗大小改变(宽高均为屏幕可视区域的 80%)。
- 点击关闭按钮后,则隐藏弹出框。
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >hangge.com</ title >
< script type = "text/javascript" src = "js/jquery.js" ></ script >
< 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;
} .dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
} .dialog-box {
top:10vh;
left:10vw;
width: 80vw;
height: 80vh;
text-align: left;
position: absolute;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
} .dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
} .dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
} .dialog-body {
background-color: #fff;
flex:1;
overflow: auto;
}
</ style >
</ head >
< body >
< button onclick = "$('#dialogContainer').show();" >点击显示弹出框</ button >
< div id = "dialogContainer" class = "dialog-container" >
< div class = "dialog-box" >
< div class = "dialog-title" >居中弹出框</ div >
< a onclick = "$('#dialogContainer').hide();" class = "dialog-close" >关闭</ a >
< div class = "dialog-body" >
< img src = "logo.png" class = "demo-image" />
</ div >
</ div >
</ div >
</ body >
</ html >
五、显示大图时限制其最大尺寸
1,效果图
2,样例代码
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >hangge.com</ title >
< script type = "text/javascript" src = "js/jquery.js" ></ script >
< 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;
} .dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
} .dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
} .dialog-box {
display: inline-block;
text-align: left;
vertical-align: middle;
position: relative;
} .demo-image {
max-width: 90vw;
max-height: 90vh;
}
</ style >
</ head >
< body >
< button onclick = "$('#dialogContainer').show();" >点击显示大图</ button >
< div id = "dialogContainer" class = "dialog-container" onclick = "$('#dialogContainer').hide();" >
< div class = "dialog-box" >
< img src = "image.jpg" class = "demo-image" />
</ div >
</ div >
</ body >
</ html >
六、实现 Word 文档页面效果
1,效果图
2,样例代码
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >hangge.com</ title >
< script type = "text/javascript" src = "js/jquery.js" ></ script >
< style >
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
} body {
background-color: #789BC9;
} page {
display: block;
height: 98vh;
width: 69.3vh;
margin: 1vh auto;
padding: 12vh;
border: 1px solid #646464;
box-shadow: 0 0 15px rgba(0,0,0,.75);
box-sizing: border-box;
background-color: white;
position: relative;
} page:after {
content: attr(data-page);
color: graytext;
font-size: 12px;
text-align: center;
bottom: 4vh;
position: absolute;
left: 10vh;
right: 10vh;
} a {
color: #34538b;
font-size: 14px;
}
</ style >
< script type = "text/javascript" >
$(document).ready(function(){
var lenPage = $("page").length;
//自动添加每页底部的页码
$("page").each(function(i){
$(this).attr("data-page", "第 "+ (i+1) +" 页,共 "+ lenPage +" 页");
});
});
</ script >
</ head >
< body >
< page >< a href = "http://hangge.com" >欢迎访问 hangge.com</ a ></ page >
< page ></ page >
< page ></ page >
</ body >
</ html >
原文出自: www.hangge.com
css3新单位vw、vh、vmin、vmax的使用详解的更多相关文章
- CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...
- CSS3新单位vw、vh、vmin、vmax使用详解
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...
- CSS3新单位vw,vh,vmin,vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
- css新单位vw,vh在响应式设计中的应用
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
- css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
- css3新单位vw、vh、vmin、vmax的使用介绍
1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vmax 是一种视窗单位,也是相对单位.它相对的不是父节点或者页面的根节点.而是由视窗(Viewport)大小来决定的,单位 1 ...
- css3新单位vw、vh、vmin、vmax的使用详解(转载)
文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961
- CSS3 - 新单位vw、vh、vmin、vmax使用详解
参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html
- css3新单位vw、vh的使用详解
响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...
- css3新单位学习
vw,vh,vmin,vmax vw 1vw = 视窗width*1% vh 1vh = 视窗heihgt*1% 如果视窗的宽度小于高度,1vmin = 1vw,如果视窗宽度大于高度,1vmin = ...
随机推荐
- 使用FastWiki一分钟搭建公司的智能客服
FastWiki 新UI介绍:基于React与LobeUI框架设计 FastWiki 最近引入了基于React的新UI,这是一个重大的更新.在设计新UI时,我们借鉴了LobeUI的框架,并且在接口调用 ...
- GoFrame 优化接口的错误码和异常的思路
前言 你是否想在使用 GoFrame 的过程中,拥有一个能打印异常堆栈,能自定义响应状态码,能统一处理响应数据的接口.如果你回答是,那么,请耐心看完本文,或许会对你有所启发.若文中由表达不当之处,恳请 ...
- 【深度学习】批量归一化 BatchNormalization
一.背景 机器学习的本质是对物理世界进行建模,做的就是拟合数据分布. 但是在模型训练过程中,神经网络参数不断更新,导数中间层的数据分布频繁地变化(内部协变量偏移),不利于网络参数 ...
- Windows 环境使用 Xshell 连接 VMware 虚拟机上的 CentOS 系统
1.VMware 点击虚拟机的设置,打开弹窗,网络使用 NAT 模式 2.VMware 菜单栏:点击 编辑>>>虚拟网络编辑器 (1)选择 VMnet8 (2)选择 NAT 模式 ( ...
- 计算机网络(http协议)
一 软件开发架构 CS 客户端 服务端BS 浏览器 服务端ps: BS本质也是CS 二 浏览器窗口输入网址回车发生了几件事 1.浏览器朝服务端发送请求2.服务端接受请求3.服务端返回相应的响应4. ...
- Jmeter前言
前言 为什么要撰写这样一个教程呢? 深入学习Jmeter 温故而知新.尽管我已经使用JMeter很长时间,但还有许多元件我并不十分了解,因此,编写教程的过程成为了我的学习过程,通过反复回顾和整理知识, ...
- torch的cuda版本安装
1.拥有英伟达显卡NVIDIA NVIDIA CUDA各版本下载链接(包括最新11版本和以往10.2版本) 以下是从NVIDIA官网转过来的链接,方便需要下载各种版本CUDA的同学.(借阅) http ...
- 一周内容分享(第 10 期):别让自己"墙"了自己
这里记录过去一周,我看到的值得分享的东西. 一方面是整理记录一下自己一周的学习,另一方面也是期待自己有更多的输出,有更多的价值. 周刊开源(Github:wmyskxz/weekly),欢迎提交 is ...
- redis的两种持久化方式
1.为什么redis需要持久化 答:edis是基于内存的,如果Redis服务器挂了,数据就会丢失 2.有几种方式实现redis的持久化 答:有两种,一种是AOF 持久化,另一种是RDB持久化 一. A ...
- 不到2000字,轻松带你搞懂STM32中GPIO的8种工作模式
大家好,我是知微! 学习过单片机的小伙伴对GPIO肯定不陌生,GPIO (general purpose input output)是通用输入输出端口的简称,通俗来讲就是单片机上的引脚. 在STM32 ...