css中vw和vh的知识点
引用文档：http://caibaojian.com/vw-vh.html；
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/；
http://blog.csdn.net/ZNYSYS520/article/details/76053961
周六和同事讨论问题时，突然聊到了vw和vh，今天整理了一下vw和vh的一些小知识点吧，日后可以自己复习的时候看看。
什么是viewport?
视窗的概念在浏览器端指的是浏览器的可视区域；而在移动端则相对复杂，它涉及到3个视口：Layout Viewport(布局视口),Visual Viewport(视觉视口)、Ideal Viewport(虚拟视口),在移动端指的是Layout Viewport
什么是vw，vh，vmax,vmin？
vw,vh,vmax,vmin是一种视窗单位，同时也是一种相对单位；它们相对的是视窗（viewport）的大小；单位1，代表相对于视窗大小的1%；
vw:1vw代表视口宽度的1%；
vh:1vh代表视口高度的1%;
vmax:选取vw/vh中最大的一个；
vmin：选取vw/vh中最小的一个；
与百分比%的区别
百分比%相对于其父元素或者其祖先元素的宽度/高度；
vw/vh相对于视窗大小的宽度/高度；vw/vh的优势在于能够直接获取高度，而百分比%则需要在设置body的高度
vmax、vmin的用处
在做移动端开发时，如果使用vw、vh设置字体大小时，在横屏和竖屏情况下是不一样大的；vmax和vmin是当前较大的vw和vh和当前较小的vw和vh，这种情况下，可以设置让字体在横竖屏现实的大小一样。
兼容性
PC端：
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
移动端：
Andriod:自4.4版起就完美支持；
iOS：自ios8起支持
实例展示:
1、vw和vh的简单示例代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>视窗vw/vh的使用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-size: 2vw;
}
.container {
width: 100vw;
border: 1px solid #ddd;
}
.container .textPart {
font-size: 2vw;
}
.container img {
width: 100vw;
}
.colorBox {
border: 1px solid #dddddd;
display: flex;
margin-bottom: 10vh;
}
.colorBox .redBox {
width: 40vw;
height: 40vh;
background-color: #ee4433;
}
.colorBox .blueBox {
width: 6vw;
height: 60vh;
background-color: deepskyblue;
}
.colorBox .grayBox {
width: 4vw;
height: 40vh;
background-color: gray;
}
</style>
</head> <body>
<div class="container">
<img src="http://jdc.jd.com/img/750x340" alt="图片">
<p class="textPart">
图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
</p>
</div>
<div class="colorBox">
<div class="redBox">红色盒子</div>
<div class="blueBox">蓝色盒子</div>
<div class="grayBox">灰色盒子</div>
</div> </body> </html>
2、vw、vh、rem的搭配使用实例代码（这样使布局更优化）
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rem和vw搭配使用</title>
</head>
<body>
<div class="container">
<img src="http://jdc.jd.com/img/750x340" alt="图片">
<p class="textPart">
图片介绍：Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci debitis nobis magni necessitatibus molestias pariatur? Beatae consequuntur fugit amet, unde maiores, eaque a dignissimos, quaerat vero deserunt excepturi dolorum. Tempora?
</p>
</div>
<div class="colorBox">
<div class="redBox">红色盒子</div>
<div class="blueBox">蓝色盒子</div>
<div class="grayBox">灰色盒子</div>
</div>
</body>
</html>
CSS代码
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(85.8974359%);
font-size: calc(1.8974359px);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(110.35665529%);
font-size: calc(15.85665529px);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(120%);
font-size: calc(15px);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(132.1%);
font-size: calc(16.6px);
}
}
.container img {
width: 100%;
border: 1px solid #ee4433;
}
.container .textPart {
font-size: 1rem;
}
.colorBox {
border: 1px solid #ddd;
display: flex;
justify-content: space-between;
}
.colorBox .redBox {
width: 11rem;
height: 8rem;
background-color: #ee4433;
}
.colorBox .blueBox {
width: 6rem;
height: 8rem;
background-color: deepskyblue;
}
.colorBox .grayBox {
width: 4rem;
height: 8rem;
background-color: gray;
}
css中vw和vh的知识点的更多相关文章
- CSS中vw和vh单位的使用
vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...
- css中vw,vh单位对于UC的兼容性问题
vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...
- CSS 中的rem，em，vh，vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- css中单位px,em，rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- CSS中的自适应单位vw、vh、vmin、vmax
1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...
- CSS的一些单位，如rem、px、em、vw、vh、vm
总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...
- Css单位px，rem，em，vw，vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
随机推荐
- MySQL——函数
MySQL数据库提供了很多函数包括: (1)数学函数 (2)字符串函数 (3)日期和时间函数 (4)条件判断函数 (5)系统信息函数 (6)加密函数 (7)格式化函数 一.数学函数 数学函数主要用于处 ...
- ios浮层滑动不流畅解决方案
前段时间做了一个浮层,但在ios上,浮层滑动不流畅,基本上是随着手指的移动而移动,经研究加上-webkit-overflow-scrolling: touch即可 eg: <!DOCTYPE h ...
- Linux内核--并发【转】
本文转自自:http://www.jianshu.com/p/035550ae05d2 为什么会产生并发 1.多个用户同时登陆的时候,他们有可能在任何时刻以任意的组合调用内核代码. 2.smp系统可能 ...
- 《机器学习实战》学习笔记第三章 —— 决策树之ID3、C4.5算法
主要内容: 一.决策树模型 二.信息与熵 三.信息增益与ID3算法 四.信息增益比与C4.5算法 五.决策树的剪枝 一.决策树模型 1.所谓决策树,就是根据实例的特征对实例进行划分的树形结构.其中有两 ...
- 分享知识-快乐自己：spring_Boot 中文返回给浏览器乱码 解析成问号？？ fastJson jackJson
心路历程: 在Controller中return 对象的时候,对象中的属性值中文部分在浏览器中 显示为问号?? 然后结果是这样的:?? 尝试排查原因: 中文乱码常有以下三种: 1.request.re ...
- CentOS7 默认防火墙firewalld
firewalld基础 firewalld是CentOS7源生支持的防火墙,firewalld最大的好处有两个:支持动态更新,不用重启服务:第二个就是加入了防火墙的“zone”概念. firewall ...
- hdu 1002 A + B Problem II（大数）
题意:就是求a+b (a,b都不超过1000位) 思路:用数组存储 第一道大数的题目,虽然很水,纪念一下! 代码: #include<cstdio> #include<cstring ...
- [原创]java操作word生成水印
应用场景 为了保护版权或辨别文件的真伪,有时需要在生成的Word文件中动态添加水印,PageOffice组件的WaterMark类就封装了给在线编辑的Word文件添加水印这一功能,调用接口非常简单. ...
- babel-runtime 和 babel-polyfill
Babel 默认只转换新的 JavaScript 语法 https://excaliburhan.com/post/babel-preset-and-plugins.html babel-plugin ...
- BZOJ2877：[NOI2012]魔幻棋盘
浅谈树状数组与主席树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://lydsy.com/JudgeOnline/problem. ...