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 = ...
随机推荐
- 烈焰遮天 cocos 手游mmo 源码 解析
引擎: cocos2.x 代码: c++ 混合 lua 游戏类型: mmo 工程结构: game : 游戏启动地方 gamelogic:接sdk相关,登陆支付统计等 libFramework:主要本游 ...
- thinkphp5.0架构总览
ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织. MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V) ...
- 洛谷P2571 [SCOI2010]传送带 [三分]
题目传送门 传送带 题目描述 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P,在CD上的移动速度为Q,在平面上的移 ...
- Java 读取目录下的所有文件
package util; import java.io.File; import java.util.ArrayList; import java.util.List; import org.apa ...
- 【Leetcode】583. Delete Operation for Two Strings
583. Delete Operation for Two Strings Given two words word1 and word2, find the minimum number of st ...
- javascript入门教程笔记
BOM BOM 是“ Browser Object Model ”的缩写,简称“ 浏览器对象模型 ”. BOM 定义了 JavaScript 操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小.版 ...
- Ubuntu系统安装网易云音乐、搜狗输入法
这两个软件都很良心,提供了Ubuntu版本,直接下载安装即可. 网易云音乐: 下载-打开-安装 http://music.163.com/#/download 搜狗拼音输入法 下载-打开-安装 htt ...
- PHP 笔记——Web页面交互
一.客户端数据提交方法 客户端浏览器的数据通常使用 GET.POST 方式提交到服务器. 1.GET方式 GET方式指直接在URL中提供上传数据或者通过表单采用GET方式上传. http://url? ...
- 「BZOJ 4502」串
「BZOJ 4502」串 题目描述 兔子们在玩字符串的游戏.首先,它们拿出了一个字符串集合 \(S\),然后它们定义一个字符串为"好"的,当且仅当它可以被分成非空的两段,其中每一段 ...
- [BZOJ4237]稻草人(CDQ分治)
先按y排序,二分,两边递归下去,然后处理下半部分对上半部分的贡献,即左下点在下半部分,右上点在上半部分的合法矩形个数. 两个部分均按x排序,枚举右上点p,则左下点需要满足: 1.横坐标大于上半部分纵坐 ...