最近在项目里突然看到了一行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. c#gridcontrol 的一些设置

    1:单元格变色,当鼠标点击到单元格的时候, 可能我们是想选择整个行,而此时gridview 默认设置是点击单元格整个行变色,这个点击的单元格变白色, 整行选择感觉有断层 于是和可以这么设置 设置Gri ...

  2. Tigase-01 使用spark或spi登录Tigase服务器

    喜欢研究IM技术的同学们,欢迎加入群 310790965 一起来学习,有什么问题可以一起讨论. 本源码是基于tigase v7.1.0来分析的,群里文件中会上传一个完整能跑的源代码压缩包,网上tiga ...

  3. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  4. GPS坐标系

    本次测试之坑,人车定位偏差,分析如下 车的定位由后台提供,由gps上报位置,采用WGS-84坐标系 前端(app/小程序)使用腾讯地图,或者高德地图,采用的是GCJ-02坐标系,或者在GCJ-02基础 ...

  5. s3c2440 nandflash 初始化

    1.什么是 nandflash ? FLASH闪存 闪存的英文名称是"Flash Memory",一般简称为"Flash",它属于内存器件的一种,是一种非易失性 ...

  6. python 基础———— 字符串常用的调用 (图2)

    1.  replace 2.  join 3.split 4 rsplit 5. strip : 去除字符串左右两边特定(指定)的字符 7. rstrip  :  去除右边特定(指定)的字符 8. l ...

  7. VMware Workstation：安装windows xp系统

    https://blog.csdn.net/nicergj/article/details/83651603

  8. CSS追加笔记

    box-shadow 属性向框添加一个或多个阴影. 语法 box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添 ...

  9. mpdf-html转PDF，中文字符乱码、加粗问题

    $defaultConfig = (new ConfigVariables())->getDefaults(); $fontDirs = $defaultConfig['fontDir']; $ ...

  10. Mybatis第二天

    Mybatis第二天   框架课程 1. 课程计划 1.输入映射和输出映射 a) 输入参数映射 b) 返回值映射 2.动态sql a) If标签 b) Where标签 c) Sql片段 d) Fore ...