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 ...
随机推荐
- [2017-11-21]Abp系列——T4应用:权限树定义
本系列目录:Abp介绍和经验分享-目录 今天介绍下,如何使用T4根据json文件自动生成权限定义. 先看成果 成果是: 要新增一个权限定义时,打开Json文件,找到目标节点,加个权限定义: 生成下Co ...
- linux 下ftp的安装配置 图文教程
0.安装ftp的前置条件是关掉SElinux # vi /etc/selinux/config 修改 SELINUX=” disabled ” ,重启服务器.若相同,则跳过此步骤. 1. 可先查看是否 ...
- git format-patch的使用【转】
本文转载自:http://blog.chinaunix.net/uid-28621021-id-3487102.html git format-patch的使用 1.在dev1分支上,打出所有de ...
- ASP.NET 4.0 页面 ValidateRequest="false" 失效不起作用
当ASP.NET 2.0升级到 ASP.NET 4.0后,页面的 ValidateRequest="false" 不起作用. 因为 ASP.NET 4.0 请求验证被提前到IHtt ...
- C++ string的查找函数和npos特殊值
STL中的string有6个查找函数: 1.find() 2.rfind() 从最后一个字符开始往前找. 3.find_first_of() 4.find_not_first_of() 5.find_ ...
- 「JLOI2011」「LuoguP4568」飞行路线（分层图最短路
题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...
- poj2182Lost Cows——树状数组快速查找
题目:http://poj.org/problem?id=2182 从后往前确定,自己位置之前没有被确定的且比自己编号小的个数+1即为自己的编号: 利用树状数组快速查找,可另外开一个b数组,角标为编号 ...
- 如何让Surface RT支持网站的flash
Go to the desktop version of IE10, hit the click ALT button on your keyboard, click on and then Comp ...
- POJ2828(插队问题)
Buy Tickets Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 17077 Accepted: 8466 Desc ...
- POJ3159(最短路)
Candies Time Limit: 1500MS Memory Limit: 131072K Total Submissions: 27051 Accepted: 7454 Descrip ...