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. 史上最详细git教程

    题外话 虽然这个标题很惊悚,不过还是把你骗进来了,哈哈-各位看官不要着急,耐心往下看 Git是什么 Git是目前世界上最先进的分布式版本控制系统. SVN与Git的最主要的区别 SVN是集中式版本控制 ...

  2. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  3. beans.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. cesium核心类Viewer简介

    1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...

  5. ionic第一坑——ion-slide-box坑(ion-slide分两页的坑)

    ionic.views.Slider = ionic.views.View.inherit({ initialize: function (options) { . . . function setu ...

  6. linux-centos在VM中的网络配置

    1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分配IP地址. #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,i ...

  7. D3.js学习(六)

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

  8. 我的MYSQL学习心得(十三) 权限管理

    我的MYSQL学习心得(十三) 权限管理 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) ...

  9. 如玫瑰一般的PHP与C#混合编程

    故事背景是这样的,有一套项目,服务器端是用C#写的,为了完成某种事情,它需要使用到一个组件,这个组件很小但很重要,很不巧的是,这个这个组件是用PHP语言写的,如果为了使用这个组件而专门搭建一个PHP的 ...

  10. [译]DbContext API中使用SqlQuery和ExecuteSqlCommand获取存储过程的输入输出参数

    水平有限,欢迎指正.原文:http://blogs.msdn.com/b/diego/archive/2012/01/10/how-to-execute-stored-procedures-sqlqu ...