视口单位(Viewport units)

什么是视口？

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。

根据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与%区别

请看下面简单的栗子：

<!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: 0;

        margin: 0

    }

    .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 内核中也得到完美的全面支持)

转载自

https://www.cnblogs.com/luxiaoxing/p/7544375.html

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

  1. css3自适应布局单位vw,vh

    css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...

  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浏览器私有属性前缀使用详解

    什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...

随机推荐

  1. 【构建之法教学项目】一个简单的基于C#的电子商务系统演练场景的代码示例

    电子商务平台,是一个历史悠久而又充满挑战的行业,他和社交一起成为中国互联网市场的两极.电子商务系统是一个非常复杂的系统,他实现了人与物.人与人的链接,同时也需要大量的技术来支撑,实现系统的高可用.这些 ...

  2. ZooKeeper（四）：从TCP数据流到zk内部处理包的转换

    通过前面几篇文章,我们可以从整体上看到zk是如何处理网络数据的宏观架构. 本文我们从细节着手,看一下一个tcp的包是如何转换到内部的数据流处理的. 一.监听用户请求socket 基于NIO的端口监听, ...

  3. ASP.NET Core Web 应用程序系列（三）- 在ASP.NET Core中使用Autofac替换自带DI进行构造函数和属性的批量依赖注入（MVC当中应用）

    在上一章中主要和大家分享了在ASP.NET Core中如何使用Autofac替换自带DI进行构造函数的批量依赖注入,本章将和大家继续分享如何使之能够同时支持属性的批量依赖注入. 约定: 1.仓储层接口 ...

  4. 松软科技web课堂:JavaScript 数组

    JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...

  5. Vue.js2.0快速入门笔记

    vue.js 解耦视图与数据,可复用的组件,前端路由,状态管理,虚拟DOM. MVVM模式:当View(视图层)变化时,会自动更新ViewModel(视图模型),View与ViewModel之间双向绑 ...

  6. Memcached 基本语法 记录

    set 命令:命令将value数值存储在指定的key中: set key flags exptime bytes [noreply] value key:键值 key-value 结构中的 key,用 ...

  7. 网络管理和nmcli命令的使用——网络接口配置-bonding实验步骤

    (实验)网络接口配置-bonding  Bonding 将多块网卡绑定同一IP地址对外提供服务,可以实现高可用或者负载均衡.直接给两块网卡设置同\一IP地址是不可以的.通过bonding,虚拟一块网 ...

  8. UVA 12165 Triangle Hazard

    https://cn.vjudge.net/problem/UVA-12165 题目 给出D.E.F分BC,CA,AB的比$m_1:m_2$,$m_3:m_4$,$m_5:m_6$和PQR三点的坐标, ...

  9. eclipse拉取git项目 Read timed out after 30,000 ms

    点击 eclipse -> Window -> Preferences -> Team ->git   在git选项里有Remote connection timeout ,默 ...

  10. IDEA debug工具使用

    参考:https://www.cnblogs.com/jajian/p/9410844.html