视口单位(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与%区别

请看下面简单的栗子：

<!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

    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中自适应布局单位vh、vw

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

随机推荐

  1. 自己动手编译Android(LineageOS)源码

    准备 设备:红米3s 设备代号:land Android版本:7.1.1 源码提供:Lineage PC配置: 系统:Ubuntu16.04 x64 至少12G RAM 至少80GB 剩余硬盘空间 良 ...

  2. go语言调度器源代码情景分析之五：汇编指令

    本文是<go调度器源代码情景分析>系列 第一章 预备知识的第4小节. 汇编语言是每位后端程序员都应该掌握的一门语言,因为学会了汇编语言,不管是对我们调试程序还是研究与理解计算机底层的一些运 ...

  3. 我不是bug神（JVM问题排查）

    Story background 回望2018年12月,这也许是程序员们日夜不得安宁的日子,皆因各种前线的系统使用者都需要冲业绩等原因,往往在这个时候会向系统同时写入海量的数据,当我们的应用或者数据库 ...

  4. Kubernetes集群部署史上最详细（二）Prometheus监控Kubernetes集群

    使用Prometheus监控Kubernetes集群 监控方面Grafana采用YUM安装通过服务形式运行,部署在Master上,而Prometheus则通过POD运行,Grafana通过使用Prom ...

  5. openJDK知识整理及概念

    上周同事去听了阿里openJDK的讲座,收集整理了一下.随着Oracle 撒手,Java 8 官方支持时间持续到 2020 年 12 月:对商业用户(Commercial Users),2019 年 ...

  6. python assert的用处

    python assert 句语格式及用法很简单.通常程序在运行完之后抛出异常,使用assert可以在出现有异常的代码处直接终止运行. 而不用等到程序执行完毕之后抛出异常. python assert ...

  7. jquery实现照片墙

    jquery照片墙 由15张图片构成,大致思路:随机生成所有图片-->点击其中一张变为一张大图-->点击大图又变回多张 主要用到jquery实现 先来看看效果 html: <div ...

  8. arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇（附源码下载）

    基于上篇的介绍,虽然有比较esri-loader.@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受.本篇文章 ...

  9. 【普及篇】通信能力API及其前景分析

    ** 1.目前通信行业发展背景**运营商基础通信能力的价值逐渐提升进入数字化时代以来,信息产业正迎来新变革与新发展——网络信息技术与社会各领域全面深度融合,为工业制造.智慧城市等各行业赋能.运营商传统 ...

  10. perlin噪声

    手贱去点了图形学里面的噪声课程,然后一个周末就交代在这上面了,还是有些云里雾里. 噪声就是给定一个输入变量,生成一个值在0~1范围内的伪随机变量的函数.在图形学中一般是输入一个坐标得到一个范围在0~1 ...