最近在项目里突然看到了一行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. 2，fiddler的基本设置

    1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...

  2. ubuntu 18.04输入法问题

    ubuntu 18.04输入法IBus出现问题.打字的弹窗只选择数字1对应的汉字,选择2,3,4,5等数字对应的汉字,就会出现问题. 例如下图只能选择1 不能选择2 3 4 5. 删除了~/.cach ...

  3. 主要的Ajax框架都有什么?

    *  Dojo(dojotoolkit.org):* Prototype和Scriptaculous (www.prototypejs.org和script.aculo.us):* Direct We ...

  4. 查看Chrome密码只需一段代码

    在Chrome浏览器的地址栏里输入“ chrome://chrome/settings/passwords ”,然后Chrome自动帮你保存的密码就会瞬间被曝露出来. 强调一下,只要不是在本机上输入以 ...

  5. idea在debugger模式下无法启动，但是在run模式下可以启动的问题

    debugger模式下,启动idea,总是报内存溢出异常, Error creating bean with name 'sysRoleUserMapper' defined in URL [jar: ...

  6. Python 3.6安装yaml时报"AttributeError: module 'pip' has no attribute 'main'"和“Non-zero exit code”错误

    1.Python 3.6安装yaml时一开始报AttributeError: module 'pip' has no attribute错误,根据网上提供的解决方法修改Pycharm安装目录D:\Pr ...

  7. Mysql双主互备+keeplived高可用架构（部分）

    一.Mysql双主互备+keeplived高可用架构介绍 Mysql主从复制架构可以在很大程度保证Mysql的高可用,在一主多从的架构中还可以利用读写分离将读操作分配到从库中,减轻主库压力.但是在这种 ...

  8. 《团队-爬取豆瓣top250-开发文档》

    项目托管平台地址:https://github.com/gengwenhao/GetTop250.git 本项目能够爬取豆瓣电影TOP250并向用户展示电影的排名,分数等

  9. Scrapy学习之路（一）————环境配置

    一.问题环境安装 首先scrapy这个爬虫框架是基于twisted完成的因此,在安装scrapy之前需要安装twisted.否则直接安装scrapy就会直接出错:Failed building whe ...

  10. flink 读取kafka 数据，partition分配

    每个并发有个编号,只会读取kafka partition  % 总并发数 == 编号 的分区   如: 6 分区, 4个并发 分区: p0 p1 p2 p3 p4 p5 并发: 0 1 2 3    ...