vw,vh,vmin,vmax

vw 1vw = 视窗width*1%

vh 1vh = 视窗heihgt*1%

如果视窗的宽度小于高度，1vmin = 1vw，
如果视窗宽度大于高度，1vmin = 1vh

如果视窗的宽度大于高度，1vmax = 1vw，
如果视窗宽度小于高度，1vmax = 1vh

应用：比如视窗中垂直居中
兼容性比较

可以看出这些单位比较适合移动开发

css3新单位学习的更多相关文章

  1. CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...

  2. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

  3. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  4. CSS3新单位vw，vh，vmin，vmax详解

    1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...

  5. css3新单位vw、vh的使用详解

    响应式布局的单位我们第一时间会想到通过rem单位来实现适配,但是它还需要内嵌一段脚本去动态计算跟元素大小. 比如: (function (doc, win) { let docEl = doc.doc ...

  6. css3新单位vw、vh、vmin、vmax的使用介绍

    1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vmax 是一种视窗单位,也是相对单位.它相对的不是父节点或者页面的根节点.而是由视窗(Viewport)大小来决定的,单位 1 ...

  7. CSS3新特性学习

    1.一些实用规范:盒子模型,列表模块,超链接方式,语言模块,背景和边框,文字特效,多栏布局: 2:新增的选择器selctor eg: 1) 子元素过滤伪类:div:first-child  (自动识别 ...

  8. css3新单位vw、vh、vmin、vmax的使用详解（转载）

    文章传送门: https://blog.csdn.net/ZNYSYS520/article/details/76053961

  9. CSS3 - 新单位vw、vh、vmin、vmax使用详解

    参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html

随机推荐

  1. 由Dapper QueryMultiple 返回数据的问题得出==》Dapper QueryMultiple并不会帮我们识别多个返回值的顺序

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 今天帮群友整理Dapper基础教程的时候手脚快了点,然后遇到了一个小问题,Dapp ...

  2. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案（二）

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  3. 前端学HTTP之日志记录

    前面的话 几乎所有的服务器和代理都会记录下它们所处理的HTTP事务摘要.这么做出于一系列的原因:跟踪使用情况.安全性.计费.错误检测等等.本文将谥介绍日志记录 记录内容 大多数情况下,日志的记录出于两 ...

  4. .Net语言 APP开发平台——Smobiler学习日志：手机应用的TextTabBar快速实现方式

    参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...

  5. java 线程 Lock 锁使用Condition实现线程的等待（await）与通知(signal)

    一.Condition 类 在前面我们学习与synchronized锁配合的线程等待(Object.wait)与线程通知(Object.notify),那么对于JDK1.5 的 java.util.c ...

  6. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

  7. Android 旋转屏幕--处理Activity与AsyncTask的最佳解决方案

    一.概述 运行时变更就是设备在运行时发生变化(例如屏幕旋转.键盘可用性及语言).发生这些变化,Android会重启Activity,这时就需要保存activity的状态及与activity相关的任务, ...

  8. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  9. 【UWP开源】图片编辑器，带贴图、滤镜、涂鸦等功能

    目录 说明 功能 实现原理 使用方法 效果截图 说明 最近空余时间研究了一下Win2D,它能为我们在UWP中提供一种类似GDI那样的绘图方法.就像传统Winform.MFC中那样重写OnPaint相关 ...

  10. Windows平台Go调用DLL的坑

    最近的项目中,使用了GO来开发一些服务中转程序.业务比较简单,但是有一些业务需要复用原有C++开发的代码.而在WINDOWS,用CGO方式来集成C/C++代码并不是太方便.所以用DLL把C++的代码封 ...