最近在项目里突然看到了一行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. node.js生成二维码

    var http = require('http'); var qs = require('querystring'); var qrImg = require('qr-image'); var se ...

  2. Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库

    Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库时出现以下错误: Message = "每个配置文件中只允许存在一个 <configSect ...

  3. Python之PIL库

    Python PIL PIL (Python Image Library) 库是Python 语言的一个第三方库,PIL库支持图像存储.显示和处理,能够处理几乎所有格式的图片. 一.PIL库简介 1. ...

  4. sha1withRSA算法

    RAS_USE_PRIVATE_ENCRYPT(3021300906052b0e03021a05000414 + SHA1(DATA))

  5. BFC和清除浮动

    1.清浮动(不考虑兼容的话这一项够用了): .clear:after{ content:''; display:block; clear:both; } 兼容ie6或7 加一个 .clear{ *zo ...

  6. 五、Pyqt5事件、信号和槽

    PyQt中提供了两种针对事件处理的机制:一种是事件,另一种则是信号和槽. 一.事件 事件处理在PyQt中是比较底层的,常用的事件有键盘事件.鼠标事件.拖放事件.滚轮事件.定时事件.焦点事件.进入和离开 ...

  7. dede织梦后台-退出空白,注销空白,打开空白,登录返回首页,登录返回登录页面

    24.php 5.4版本 后台500错误,打开空白的问题 不兼容 登录时空白 后台空白 24-1./include/userlogin.class.php 今天把电脑上的phpStudy升级到2013 ...

  8. Cookie随笔

    解决了服务器不能识别不同浏览器的问题,相当于给每个浏览器加了个“身份证”. Cookie首先由服务器创建发给浏览器,随后浏览器每次访问服务器时都带上这个Cookie. Cookie缺点: ·Cooki ...

  9. ArrayList增加扩容问题 源码分析

    public class ArrayList<E>{ private static final int DEFAULT_CAPACITY = 10;//默认的容量是10 private s ...

  10. 使用Jmeter进行http接口做功能、性能测试

    在测试移动APP时,会有很多接口需要做测试,我在这里介绍一下对HTTP接口做功能.性能的测试.首先我们会从开发人员拿到接口数据.     一.测试需求描述 1. 本次测试的接口为http服务端接口 2 ...