最近在项目里突然看到了一行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. 使用Snappy将html或者url转成PDF文件

    这是一个操作简单的html文件或者url转PDF的php库 Github地址 https://github.com/KnpLabs/snappy 安装: $ composer require knpl ...

  2. css伪类及伪元素用法

    注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标 ...

  3. AX2009 批处理作业中使用多线程---顶级采摘

    顶级采摘 是前两种模式的一种混合,使用使用实体表存储单任务模式那样的每个工单,任务每次都取顶行做操作.单任务数不想单任务模式,一个工单一个任务.而是类似批量捆绑那样设置任务数.表:demoTopPic ...

  4. mysql 数据库的备份和还原

    1. 逻辑备份 (和存储引擎无关) mysqldump -uroot -p schoolDB TSubject > /mysqlbackup/schoolDB.TSubject.sql  (备份 ...

  5. GUI学习之二——PyQt控件初识

    一.控件概念 控件是一个程序界面上的各个独立的元素, 它具备用户点击.接收用户输入.展示不同内容.存放其他控件等功能. 二.控件分类 常用的控件按功能可以分为以下几种类 按钮 QPushButton— ...

  6. UTF-8的BOM含义

    BOM的介绍 在github上写md文件的时候,发现生成自己blog时,报出一个错误是让使用UTF-8编码,然后在Notepad++上把文件转成UTF-8时,发现菜单中有"UTF-8无BOM ...

  7. MyBatis generator配置 overwrite 文件覆盖失效

    工具:IDEA.jdk1.8.mysql 底部有解决方法! pom.xml配置 <plugins> <!--Mybatis自动代码插入--> <plugin> &l ...

  8. 数据结构与STL容器

    1.静态数组 静态数组就是大小固定不能扩展的数组,如C中普通数组.C++11中array. 2.动态数组 动态数组的空间大小在需要的时候可以进行再分配,其代表为vector.由于数组的特点,在位置0插 ...

  9. 修改云主机windows密码不生效

    Step1:使用文本工具打开插件路径: 路径为:C:\Program Files\Cloudbase Solutions\Cloudbase-Init\Python\Lib\site-packages ...

  10. lwip协议栈移植（1）

    lwip移植分为两类: 1,只移植内核核心,用户应用程序编写只能基于raw/callback api进行 2,移植内核核心和上层API函数模块,用户可以使用所有三种API编程,即 raw/callba ...