视口单位(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. ZooKeeper（四）：从TCP数据流到zk内部处理包的转换

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

  2. abp去掉AbpUser中的Name,Surname，去掉姓和名分离

    abp是国外的框架,默认的框架中的AbpUser表中的Name和Surname是分开的,这不符合国情:可以先去掉 1. 在User类中重写Name和Surname,并设置为私有 2. 在DbConte ...

  3. echarts 柱状图+折线+文字倾斜及省略

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. jmeter控制器（三）

    While Controllert当控制器: 当满足条件的情况下,就会执行控制器里面的脚本,首先我们设置线程组循环次数为10,如下图: 其次在配置元件中添加一个计数器,并设置从0到最大的10,每次递增 ...

  5. nginx 七层负载均衡

    [tcp] nginx 七层负载均衡 nginx负载均衡概述 当我们的Web服务器直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,我使用多台Web服务器组成集群,前端使用Nginx负载均衡, ...

  6. navicat使用教程-PJ

    navicat使用教程-PJ Navicat Keygen Patch是一款专门针对Navicat系列软件出品的一款小巧实用,功能强大的破解辅助工具.它能够实现对Navicat全系列版本进行激活破解, ...

  7. 最近公共祖先（LCA）基础模板(倍增法)

    之前在澡堂学过这么个东西,听课时理解非常透彻,然后做题时是这种状态: 因为并没有切板子题,最近切掉以后看同桌,他默默地说了一句话: 我是什么时候A的来着... 我当时就心态爆炸... 现在来进行简单整 ...

  8. C#位运算实际作用之操作整型某一位

    1.前言 前几天写了两篇关于c#位运算的文章 c#位运算基本概念与计算过程 C#位运算实际运用 在文中也提到了位运算的实际作用之一就是合并整型,当时引用了一个问题: C# 用两个short,一个int ...

  9. 立足于运维与监控的前端框架 NoahV

    NoahV是一个致力于解决中后台前端效率问题的前端框架,立足于运维和监控的应用场景,使用当前前端最新的技术栈并结合团队在项目开发中的最佳实践从而推出的前端开发框架. NoahV提供的功能覆盖了从开发到 ...

  10. TypeScript + Webpack 4 开发环境搭建(转)

    前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板,生成的项目使用的默认语言是 TypeScript,虽然以前在此之前并没有用过TypeS ...