引用文档：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的知识点的更多相关文章

  1. CSS中vw和vh单位的使用

    vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...

  2. css中vw,vh单位对于UC的兼容性问题

    vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...

  3. CSS 中的rem，em，vh，vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  4. css中单位px,em，rem和vh/vw的理解

    >px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  5. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  6. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  7. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  8. CSS的一些单位，如rem、px、em、vw、vh、vm

    总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...

  9. Css单位px，rem，em，vw，vh的区别

    px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...

随机推荐

  1. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. PAT 天梯赛 L2-022. 重排链表 【数据结构】

    题目链接 https://www.patest.cn/contests/gplt/L2-022 思路 先用结构体 把每个结点信息保存下来 然后深搜一下 遍历一下整个链表 然后就重新排一下 但是要注意一 ...

  3. Linux Shell Script目录

    目录 Linux Shell基础 开始Shell编程 代码 示例代码查看:https://github.com/Furzoom/demo-C/tree/master/src/shell

  4. BZOJ 4519 [CQOI2016]不同的最小割

    这道题目很奇怪. 为什么奇怪?因为这道题用了一种叫分治最小割/最小割树的玩意. 以前从来没有见过这东西. 推荐一个讲这玩意的博客 写起来还是很顺手的. #include<iostream> ...

  5. IIS 7.5 虚拟主机独立用户的配置.

    1:新建用户 2:打开 IIS->功能视图->打开编辑身份验证->匿名身份验证,点右边编辑->匿名用户标识中选"特定用户"->确定. 3:编缉网站的权 ...

  6. Lua调用C,C++函数案例

    该程序主要是C++与Lua之间的相互调用示例.执行内容:(1)新建一个lua_State(2)打开常用库,如io,os,table,string等(3)注册C函数(4)导入程序所在目录下所有*.lua ...

  7. 分享知识-快乐自己：SpringMvc整合遇到-前台传JSON参数，后台实体类对象接收

    前台数据转JSON对象: /** * * @param $myFrom:from表单 * @returns {{}} */ function from($myFrom) { var ebookEntr ...

  8. tensorflow实现svm iris二分类——本质上在使用梯度下降法求解线性回归（loss是定制的而已）

    iris二分类 # Linear Support Vector Machine: Soft Margin # ---------------------------------- # # This f ...

  9. oracle11g登录等问题

    一.oracle 11g登录服务开启 成功安装Oracle 11g后,共有7个服务,这七个服务的含义分别为:1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写 ...

  10. python 多模块文件共享变量

    Python import 包的机制是,import进来的和默认的系统的module了,都放在sys.module这个字典里面. 多个py文件再次import的时候,会先去sys.module里面检查 ...