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 ...
随机推荐
- ls bash: cannot create temp file for here-document: No space left on device
出现这种问题,一般是磁盘空间满了,或者是inode满了 使用命令: df -h查询磁盘空间 df -i 查询inode占用 Filesystem Inodes IUsed IFree IUse% Mo ...
- python获取本机IP地址
方法一 通常使用socket.gethostname()方法即可获取本机IP地址,但有时候获取不到(比如没有正确设置主机名称) import socket #获取计算机名称hostname=socke ...
- STS、Eclipse报java.lang.OutOfMemoryError: PermGen space 内存溢出
我使用的工具是STS, Eclipse同理: 打开如下界面: 左则选择项目启动使用的Tomcat-->在右侧面板Tab项中选择" Arguments":在VM argumen ...
- Antler 工具使用（.g 转.java / .cs）
1. JAVA环境 2. Antler 工具包: antlr-3.5.1-complete-no-st3.jar 路径加入classpath 3. cmd命令行: java org.antlr.Too ...
- POJ2104 K-th Number —— 区间第k小 整体二分
题目链接:https://vjudge.net/problem/POJ-2104 K-th Number Time Limit: 20000MS Memory Limit: 65536K Tota ...
- Tomcat实现多主多备
Nginx Upstream 实现简单双机主从热备 下面配置多主多从: upstream testproxy { server 127.0.0.1:8080; server 127.0.0.1:808 ...
- redis简介及安装
1 redis简介及安装 1.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. 首 ...
- Facebook的实时流处理技术——Scuba是Facebook的一个非常快速、分布式的内存数据库，用于实时分析和查询
Scuba,Facebook的一个非常快速.分布式的内存数据库,用于实时分析和查询.是Facebook的回归分析代码.错误报告监控.广告收入监控和性能调试的背后主力. Facebook的实时流处理技术 ...
- PHP读取xml方法介绍
一,什么是xml,xml有什么用途 XML(Extensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Marku ...
- 机器视觉 Histogram of oriented gradients
Histogram of oriented gradients 简称 HoG, 是计算机视觉和图像处理领域一种非常重要的特征,被广泛地应用于物体检测,人脸检测,人脸表情检测等. HoG 最早是在200 ...