引用文档：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. 移动端 (H5) 调试工具 -- vconsole

    最近在改一个移动端项目,在手机上调试贼头疼,什么日志都看不到,分析不了bug问题. 然后我同事给我介绍了一个移动端的调试神器 -- vconsole 有了这个神器,领导再也不用担心我的工作啦!!! 0 ...

  2. 20145239 《Java程序设计》实验三 实验报告

    详见我的parter20145224的博客:http://www.cnblogs.com/20145224kevs/p/5428892.html 感想:这次的实验看似容易,但很多点都需要注意,比如开源 ...

  3. SDUT OJ 之 连通分量个数 （dfs）

    数据结构实验:连通分量个数 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  在无向图中,如果从顶点vi到顶点vj有路径,则称vi ...

  4. 一步一步教你简单完成 Android USB开发

    项目中有一个新的需求,要求可以连接一个USB体温枪,APP可以从体温枪中读取到体温数据,一番搜寻之后发现一个封装很棒的USB通信库. github地址:usb-serial-for-android 准 ...

  5. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  6. array_2.array_rand

    从数组中随机取出一个或多个单元 <?php $arr = [1, 2, 3]; $rand = array_rand($arr, 2); var_dump($rand);

  7. hdu-5857 Median(水题)

    题目链接: Median Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  8. android自定义控件(二) 入门,继承View

    转载请注明地址:http://blog.csdn.net/ethan_xue/article/details/7313788 ps: 可根据apidemo里LableView,list4,list6学 ...

  9. nginx使用ssl模块配置HTTPS支持 <转>

    默认情况下ssl模块并未被安装,如果要使用该模块则需要在编译时指定–with-http_ssl_module参数,安装模块依赖于OpenSSL库和一些引用文件,通常这些文件并不在同一个软件包中.通常这 ...

  10. 编写html页面时常见的问题（二）

    这次我接着说几个编写页面时常见的另外几个问题. 不能水平居中对齐 在我们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种情况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种情况的 ...