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. tp5隐藏入口文件(基于nginx)

    location / {             try_files $uri $uri/ /index.php?$query_string; #这项配置解决访问根目录以外路径报404的错误      ...

  2. git小结-ms

    目录 1.git是什么 2.git怎么工作的 3.git常用命令 4.git提效工具 5.git的技术用语 1.git是什么 git是开源的分布式的版本控制系统,可以有效.高速地处理的项目版本管理.g ...

  3. 1-Spark-1-性能调优-数据倾斜1-特征/常见原因/后果/常见调优方案

    数据倾斜特征:个别Task处理大部分数据 后果:1.OOM;2.速度变慢,甚至变得慢的不可接受 常见原因: 数据倾斜的定位: 1.WebUI(查看Task运行的数据量的大小). 2.Log,查看log ...

  4. javascript_17-基本类型和引用类型

    基本类型 直接存储值 Number . String .Boolean undefined.null 引用类型 存储引用 -Object.Array.Date.函数 包装基本类型--引用类型 func ...

  5. Linux学习django-CentOS部署自己本地的django项目

    前言 自己本地写好的django项目,如何部署到linux服务器上,让其他的小伙伴也能访问呢?本篇以centos系统为例,把本地写好的django项目部署到linux服务器上环境准备: 环境准备:1. ...

  6. Python入门篇-基础语法

    Python入门篇-基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序 一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...

  7. Java获取各种路径

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径(2).request.getRealPath(request.getRequestURI( ...

  8. 2013.4.19 - KDD第一天

    其实昨天KDD就开始了,不过今天算是我跟KDD的第一天.   昨天夜里就短信跟中秋聊了一会儿,然后中秋说他一天都在弄数据库,连不上怒了.然后我跟他说明天我来.于是今天就在图书馆弄KDD,数据是用数据库 ...

  9. Kubernetes高级调度- Taint和Toleration、Node Affinity分析

    此文分享了污点和Node Affinity实际使用过程中的细节.坑和思维误区.同时整理且回答了诸多细节问题,尤其那些在官方文档中不曾提及的细节. 阅读提示:文中的节点指Node (避免Pod和Node ...

  10. qingqing的项目

    1 https://www.cnblogs.com/zhangqing979797/p/10147679.html 2 https://www.cnblogs.com/zhangqing979797/ ...