css3自适应布局单位vw,vh

一、总结

一句话总结：

vw和vh都是视图单位，分别为视图宽高的1%

1、vh/vw与%区别？

%是相对于父元素，vh和vw是相对于视图高宽

% 百分比，相对长度单位，相对于父元素的百分比值
vh和vw相对于视口的高度和宽度

二、css3自适应布局单位vw,vh你知道多少？

转自或参考：css3自适应布局单位vw,vh你知道多少？
https://www.cnblogs.com/luxiaoxing/p/7544375.html

视口单位(Viewport units)

什么是视口？

在PC端，视口指的是在PC端，指的是浏览器的可视区域；

而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范，视口单位主要包括以下4个：

1.vw：1vw等于视口宽度的1%。

2.vh：1vh等于视口高度的1%。

3.vmin：选取vw和vh中最小的那个。

4.vmax：选取vw和vh中最大的那个。

vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。

比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

vh/vw与%区别

%是相对于父元素，vh和vw是相对于视图高宽

% 百分比，相对长度单位，相对于父元素的百分比值
vh和vw相对于视口的高度和宽度

请看下面简单的栗子：

<!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>VW&VH</title>

</head>

<style>

    * {

        padding: ;

        margin:

    }

    .left {

        float: left;

        width: 50vw;

        height: 20vh;

        background-color: blue;

        text-align: center;

        line-height: 20vh;

        font-size: 3rem

    }

    .right {

        float: right;

        width: 50vw;

        height: 20vh;

        background-color: green;

        text-align: center;

        line-height: 20vh;

        font-size: 3rem

    }

</style>

<body>

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

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

</body>

</html>

兼容性问题(在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持)

............................................................
 
 
 
 
 
 

css3自适应布局单位vw,vh的更多相关文章

  1. css3自适应布局单位vw,vh你知道多少？

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  2. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  3. [转]css3自适应布局单位vw,vh你知道多少？

    原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...

  4. H5_0025：css3自适应布局单位vw,vh

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  5. CSS3自适应字体大小(vw vh)

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...

  6. css---【vw,vh】进行自适应布局单位

    在进行CSS3自适应布局,会用到 vw 和 vh 进行布局 视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:L ...

  7. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  8. 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

    一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...

  9. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

随机推荐

  1. nginx mirror/post_action+gor实现https流量复制

    关于gor: 参考: https://www.cnblogs.com/jinjiangongzuoshi/p/11773070.html https://github.com/buger/gorepl ...

  2. Laravel5.6---搜索查询 自带paginate()分页 get传参

    laravel的paginate()分页,如果用post传参,点击第二页时会默认使用get,就会返回原始数据了 需要把查询数据get方式也放到paginate()分页参数中 一.路由 Route::g ...

  3. PHP/Python---百钱百鸡简单实现及优化

    公鸡5块钱一只,母鸡3块钱一只,小鸡一块钱3只,用100块钱买一百只鸡,问公鸡,母鸡,小鸡各要买多少只? 今天看到这题很简单 ,但是随手写出来后发现不是最优的

  4. docker 安装及使用介绍

    docker 安装及使用用介绍 安装docker所依赖的基础环境 1 64 bits CPU 2 Linux Kernel 3.10+ //如果低于则需要手动给内核打补丁.因为分层构建联合挂载系统得在 ...

  5. [Python] Codecombat 攻略 地牢 Kithgard (1-22关）

    首页:https://cn.codecombat.com/play语言:Python 第一界面:地牢 Kithgard(22关) 时间:1-3小时 内容:语法.方法.参数.字符串.循环.变量等 网页: ...

  6. generator 和yeild

    参考 https://www.cnblogs.com/xybaby/p/6322376.html 使用yield那么该函数就变成了一个生成器方法. def zheng(n,m): if n<m: ...

  7. java线程基础巩固---分析Thread的join方法详细介绍，结合一个典型案例

    关于Thread中的join方法貌似在实际多线程编程当中没怎么用过,在当初学j2se的时候倒时去学习过它的用法,不过现在早已经忘得差不多啦,所以对它再复习复习下. 首先先观察下JDK对它的介绍: 其实 ...

  8. 正确robots写法，解决百度搜索不显示缩略图问题

    网站上线http://zhimo.yuanzhumuban.cc/有一年左右时间了,百度搜索显示略缩图少之又少,通过自己这几天的观察发现. 结合百度站长平台的 robots 工具和抓取诊断工具检查后, ...

  9. python - djanog (静态文件)

    # 在 setting 文件中的 static ,通过这个方法(别名) 可以拼接到其它文件夹中的文件 # 第一步: 导入 # {% load static %} # 第二步: 查找 static (别 ...

  10. HiveQL 数据装在与导出

    一.向管理表中装载数据 1.向表中装载数据load 1)load语法 2)LOCAL  指的是操作系统的文件路径,否则默认为HDFS的文件路径 3)overwrite关键字 如果用户指定了overwr ...