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 ...
随机推荐
- 简单Android代码混淆（转）
代码混淆步骤: 1,project.properties中打开代码混淆功能,加入proguard.config=proguard.cfg 2,编辑proguard.cfg文件,项目没有自动生成时可手工 ...
- Django的基础操作总结
1:准备开始 建立一个新的project: django-admin.py startproject XXXXXX(名称) 建立一个新的App:python manage.py startapp XX ...
- BZOJ 3083 遥远的国度 树链剖分+线段树
有换根的树链剖分的裸题. 在换根的时候注意讨论. 注意数据范围要开unsigned int或longlong #include<iostream> #include<cstdio&g ...
- 我所理解的RESTful Web API [设计篇]【转】
原文:http://www.cnblogs.com/artech/p/restful-web-api-02.html <我所理解的RESTful Web API [Web标准篇]>Web服 ...
- 深度学习在gilt应用——用图像相似性搜索引擎来商品推荐和服务属性分类
机器学习起源于神经网络,而深度学习是机器学习的一个快速发展的子领域.最近的一些算法的进步和GPU并行计算的使用,使得基于深度学习的算法可以在围棋和其他的一些实际应用里取得很好的成绩. 时尚产业是深度学 ...
- 2017 google IO大会——5.17
大家好! 每年一度的全球互联网及新型技术的盛会 Google IO,今年的大会日期和地址已经公布了:大会将在5月17至19日在谷歌公司总部边上的会场,美国加州 Mountain View的 Shore ...
- CF285 E Positions in Permutations——“恰好->大于”的容斥和允许“随意放”的dp
题目:http://codeforces.com/contest/285/problem/E 是2018.7.31的一场考试的题,当时没做出来. 题解:http://www.cnblogs.com/y ...
- bzoj 4310 跳蚤 —— 后缀数组+二分答案+贪心
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4310 二分答案——在本质不同的子串中二分答案! 如果二分到的子串位置是 st,考虑何时必须分 ...
- python--面向对象（最全讲解）
http://www.cnblogs.com/Eva-J/articles/7293890.html 阅读目录 楔子 面向过程vs面向对象 初识面向对象 类的相关知识 对象的相关知识 对象之间的交互 ...
- 转学习LINUX的建议
作为一个新人,怎样学习嵌入式Linux?被问过太多次,特写这篇文章来回答一下.在学习嵌入式Linux之前,肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).C语言要学到什 ...