css3新单位vw、vh、vmin、vmax的使用介绍
1,vw、vh、vmin、vmax 的含义
2、vw、vh 与 % 百分比的区别
3、vmin、vmax 用处
4、一个简单的样例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: ;
padding: ;
border: ;
} .demo {
width: 100vw;
font-size: 5vw;
margin: auto;
background-color: #50688B;
color: #FFF;
} .demo2 {
width: 80vw;
font-size: 5vw;
margin: auto;
background-color: #ff6a00;
} .demo3 {
width: 50vw;
height: 50vh;
font-size: 1vw;
margin: 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、实现完整覆盖的遮罩层
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, button {
margin: ;
padding: ;
border: ;
} button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
} #mask {
width: 100vw;
height: 100vh;
position: fixed;
top: ;
left: ;
background: #;
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的使用介绍的更多相关文章
- 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的使用详解(转载)
文章传送门: 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 = ...
随机推荐
- 监控属性数组(Observables Arrays )
如果你想发现并响应一个对象的改变,就应该用监控属性(observables).如果你想发现并响应一个集合的变化,就该用监控属性数组 (observableArray).监控属性数组在显示或编辑多个值以 ...
- Python教程(一)Python简介
Python就为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数据库.文本等大量内容,被形象地称作“内置电池(batteries included)”.用Python开发,许多功能不必从零 ...
- Group_Concat函数示例
1. 函数定义: GROUP_CONCAT([DISTINCT] expr [,expr ...] [ORDER BY {unsigned_integer | col_name | expr} [AS ...
- 转:VMMAP内存查看工具
转:http://blog.csdn.net/woddle/article/details/45337767 下面我根据VMMap来详细介绍一下内存的分类. 内存是一个很复杂的系统,其中的paging ...
- Linux内存管理中的slab分配器
转载自:http://edsionte.com/techblog/archives/4019 Linux内核中基于伙伴算法实现的分区页框分配器适合大块内存的请求,它所分配的内存区是以页框为基本单位的. ...
- Docker运行oracle12c注意事项
title: docker运行oracle12c注意事项 date: 2019-03-27 13:42:34 categories: 数据库 author: mrzhou tags: docker 数 ...
- wc 统计行数 字数
Linux统计文件行数 2011-07-17 17:32 by 依水间, 168255 阅读, 4 评论, 收藏, 编辑 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数. ...
- 【BZOJ 4503】4503: 两个串 (FFT)
4503: 两个串 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 497 Solved: 226 Description 兔子们在玩两个串的游戏.给 ...
- [BZOJ4289][PA2012]TAX(最短路)
首先考虑一种暴力做法,为每条边拆成两条有向边,各建一个点.若某两条边有公共点,则在边所对应的点之间连一条边,权值为两条边中的较大值.这样跑最短路是$O(m^2\log m)$的. 用类似网络流中补流的 ...
- BNU校赛总决赛J 小白兔小灰兔 相交计算几何模板
J 小白兔小灰兔 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K Special Judge, 64bit IO Format: %lld 题目描述 ...