最近在项目里突然看到了一行css代码，height:100vh; 一时间有点蒙蔽

　　因为之前有听过这个css3新增单位，但没有去了解过。

　　那这个单位又跟px，rem，em，%有什么不同呢？

　　简述：

　　　   px：   相对长度单位，固定像素

　　　　rem： 相对长度单位，表示根元素（即html元素）通过设置html的font-size，实现等比例缩放，

　　　　　　　html {font-size: 16px;} ，即 1rem = 16px;

　　　　　　　比如，你给一个div设置宽高为32px，相当于 width: 2rem; height: 2rem;

　　　　em： 相对长度单位，不过em是根据父元素的font-size来进行转变的

　　　　　　   比如，下面代码父元素.parent字体大小为12px，子元素.son的宽高为1rem（即：1rem = 12px;）

　　　<div class="parent" style="font-size: 12px;">

        <div class="son" style="width: 1rem;height: 1rem;"></div>

     </div>

　　　　%：  相对长度单位，相对于父元素的大小设定的比例

　　　　　　 比如，下面代码的父元素.parent设置width:100%;，子元素.son会继承父元素.parent的宽度，即：width:100%;

　　　　　<div class="parent" style="width: 100%;">

            <div class="son"></div>

        </div>

　　　　　　

　　　　　　注：这也是为什么你会看到很多人给body设置width:100%;height:100%的原因，因为body里的子元素都会继承　　

　　　　vw,vh

　　

　　　　vw,vh：官方描述是相对于视口的宽度和高度，视口被均分为100单位的vw，vh

　　　   视口：如果在PC端，是指浏览器的可视区域；如果在移动端，可以简单理解为手机屏幕区域

　　　　

　　　  上面简单解释了什么是vw，wh和什么是视口。那这个单位到底是怎么计算的呢？

　　　  这里有一个公式：视口  / 100 * 你想设置的数值

　　　  这里的视口以 iphone5，iphone6，iphone6 Plus举例

　　　   iphone5  320 * 568 
　　　   iphone6  375 * 667
　　　   iphone6  Plus 414 * 736 

　　　　假如你给一个div设置宽高为width:5vw; height:5vh; 然后按F12，选择设备iphone5查看

　　　　这个时候通过上面的公式可计算出 1vw,1vh是多少

　　　　320  /  100  即：1vw = 3.2，假如你给元素设置width: 10vw，实际相当于 3.2 * 10 = 32px

　　　　568 /  100  即：1vw = 5.68，假如你给元素设置height: 10vh，实际相当于 3.2 * 10 = 32px

　　　　注：这里视口指的就是手机设备的css像素，比如上面列出的  iphone5 320 *568 

　　　

　　　

　　　　可能大家还是有点蒙蔽，可以试一试下面的demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title></title>

</head>

<style>

    * {

        padding: 0;

        margin: 0

    }

    .left {

        float: left;

        width: 50vw;

        height: 20vh;

        background-color: blue;

        text-align: center;

        line-height: 20vh;

        font-size: 5vw;

    }

    .right {

        float: right;

        width: 50vw;

        height: 20vh;

        background-color: green;

        text-align: center;

        line-height: 20vh;

        font-size: 5vw

    }

</style>

<body>

    <div class="left">left</div>

    <div class="right">right</div>

</body>

</html>

　　参考：https://www.cnblogs.com/luxiaoxing/p/7544375.html

　　　　

　　　　　

　　　　

　　　

　　　　

　　

初识vw和vh的更多相关文章

  1. px转vw和vh的工具（对前端同学有用）

    CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面. 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPhone6的屏幕设计的. 前端开发工程师将这 ...

  2. css3新单位vw、vh的使用详解

    响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...

  3. vw、vh、vmin、vmax、em、rem的使用详解

    转载自:https://blog.csdn.net/ZNYSYS520/article/details/76053961 1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vma ...

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

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

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

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

  6. 网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

  7. css3 vw、vh属性详解，以及与%、rem的区别介绍

    最近的项目需求,内嵌电视端显示页面,所以使用到了css3的属性:vw \ vh,遇到一些问题,记录下来 vw.vh是什么? 字面上可以简单理解为,vw (view width),vh(view hei ...

  8. vw 、vh、vmin 、vmax

    转自:https://blog.csdn.net/romantic_love/article/details/80868909 vw.vh.vmin.vmax是一种视窗单位,也是相对单位. 它相对的不 ...

  9. CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...

随机推荐

  1. FastDFS api介绍

    1. 命令行api介绍 FastDFS提供了可用于运维测试的命令行api,下面进行介绍: 1.1 fastdfs服务管理 tracker进程服务管理脚本 /etc/init.d/fdfs_tracke ...

  2. mRNA文库构建

    mRNA文库构建 Posted: 三月 27, 2017  Under: Transcriptomics  By Kai  no Comments RNA-seq测序方法 在测mRNA过程中,首先要去 ...

  3. super()调用父类构造方法

    super()表示调用父类中的构造方法 1.子类继承父类,子类的构造方法的第一行,系统会默认编写super(),在调用子类的构造方法时,先调用父类的无参数构造方法 2.如果父类中只有有参数构造方法,那 ...

  4. pclConfig.cmake or PCLConfig.cmake

    Could not find a package configuration file provided by "pcl" (requested  version 1.8) wit ...

  5. [转] Shader Blending

    引用:1.Unity3D shader Blending2.[风宇冲]Unity3D教程宝典之Shader篇:第十三讲 Alpha混合 混合(Blending)是计算机呈现渲染结果的最后阶段,每一个像 ...

  6. 【机器学习】随机森林 Random Forest 得到模型后，评估参数重要性

    在得出random forest 模型后,评估参数重要性 importance() 示例如下 特征重要性评价标准 %IncMSE 是 increase in MSE.就是对每一个变量 比如 X1 随机 ...

  7. js几种数组遍历方法.

    第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...

  8. 【ElasticSearch】 elasticsearch-head插件安装

    本章介绍elasticsearch-head插件安装,elasticsearch安装参考:[ElasticSearch] 安装 elasticsearch-head安装和学习可参照官方文档: http ...

  9. IE 11和const的兼容问题

    说好的IE11兼容javascript中的常量类型 const 呢 ?可能并没有完全兼容 项目中遇到一个问题,采用google浏览器访问没问题,在本地jetty启动,IE11也可以正常访问,然而当我将 ...

  10. C#算法

    递归 任何一个方法既可以调用其他方法又可以调用自己,而当这个方法调用自己时,我们就叫它递归函数或者递归方法! 通常递归有两个特点: 1.递归方法一直会调用自己直到某些条件满足,也就是说一定要有出口; ...