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

新单位也成为视窗单位,视窗(Viewport)单位已经有了好几年了,但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用,特别是那些涉及响应式的设计。

1.基本说明

长度单位 作用 特性
px 页面按精确像素展示 绝对单位
em 基准点为父节点字体的大小 相对单位
rem 相对根节点Html字体大小来计算,常在移动端应用 相对单位
% 是相对于父元素的大小设定的比率 相对单位
vw 视窗宽度的百分比,(1vw 代表视窗的宽度为 1%) 视窗单位
vh 视窗高度的百分比,(1vh代表视窗高度的1%) 视窗单位
vmin 当前 vw 和 vh 中较小的一个值 视窗单位
vmax 当前 vw 和 vh 中较大的一个值 视窗单位

你可以在任何一个可以使用像素值的地方使用它们,比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

tip:vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
假如给页面设置一个宽800px,则400px=50vh=50%。

2.vw、vh 与 % 百分比的区别

(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

3.vmin、vmax 用处

做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

4.浏览器兼容性

(1)桌面 PC
  • Chrome:自 26 版起就完美支持(2013年2月)
  • Firefox:自 19 版起就完美支持(2013年1月)
  • Safari:自 6.1 版起就完美支持(2013年10月)
  • Opera:自 15 版起就完美支持(2013年7月)
  • IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
(2)移动设备
  • Android:自 4.4 版起就完美支持(2013年12月)
  • iOS:自 iOS8 版起就完美支持(2014年9月)

CSS3新单位vw、vh、vmin、vmax使用详解的更多相关文章

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

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

  2. CSS3新单位vw,vh,vmin,vmax详解

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

  3. css新单位vw,vh在响应式设计中的应用

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  4. css新单位 vw , vh

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

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

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

  6. css3新单位vw、vh、vmin、vmax的使用详解(转载)

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

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

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

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

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

  9. css3新单位学习

    vw,vh,vmin,vmax vw 1vw = 视窗width*1% vh 1vh = 视窗heihgt*1% 如果视窗的宽度小于高度,1vmin = 1vw,如果视窗宽度大于高度,1vmin = ...

随机推荐

  1. Idea各种快捷生成Live Template的代码整合

    Idea各种快捷生成整合 快速生成method方法注释 配置方法 打开Idea ---> Settings , 搜索 live 点击右边的 + 号,创建模板组 Template Group,之后 ...

  2. Git暂存本地代码,强制获取远程最新代码

    一:git stash  // 把本地修改的代码压到git栈中去 二:git pull  // 本地代码压栈之后,pull远程代码会完全覆盖本地代码 三:git stash list  // 可以查看 ...

  3. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

  4. 【Nginx】基础学习概览【汇总】

    一.Nginx 简介安装启动 二.Nginx的应用场景 三.Nginx中的配置命令 四.实现动态负载均衡 五.四层负载均衡 六.主从热备 七.动静分离 一.Nginx 简介安装启动 [Nginx]简介 ...

  5. 阿里社招Java面试题总结——面试官分享

    面试题 1.Java中的内存溢出是如何造成的 2.gc的概念,如果A和B对象循环引用,是否可以被GC? 3.Error.Exception和RuntimeException的区别,作用又是什么? 4. ...

  6. 使用dubbo引用和发布服务时出现的异常:HTTP状态500 - 请求处理失败; 嵌套异常是com.alibaba.dubbo.rpc.RpcException:无法在服务cn.e3mall.service.ItemService中调用方法getTbItemById。使用dubbo版本2.5.3在消费者...

    异常情况如下: 从异常看,主要是因为TbItem没有序列化: 分析问题: 表现层调用服务端时返回了一个TbItem对象即Java对象,此时这个对象远程调用拿过来必须进行序列化,要进行网络传输必须先要把 ...

  7. 获取不到jdbc.driver的值解决办法

    我存在的问题是: 1.先检查自己是否出错 ①首先想到mysql版本和驱动版本之间的冲突问题,我的mysql是5.5.56,驱动用的5.1.32,上网查了一下可以用,但还是尝试换了一个版本的驱动,还是出 ...

  8. java对象与java对象引用的区别

    java对象与java对象引用的区别 对象与对象引用的区别 直接用例子说话吧 Person per = new Person("张三"); 这一条语句,其实包括了四个动作: 右边的 ...

  9. C#中的根据实体增删改操作

    在日常操作中,我们经常会对一些数据进行批量更新, 我在使用EF的时候,没有找到比较好的批量更新的解决方案, 便参考了张占岭前辈的博客,整合了这么一个简略版的使用实体类生成数据库增删改SQL的操作类 在 ...

  10. SQLServer的排序规则(字符集编码)

    SQLServer的排序规则(字符集编码) 一.总结 1.SQLServer中的排序规则就是其他关系型数据库里所说的字符集编码: 2.SQLServer中的排序规则可以在3处设置,如下: 服务器级别( ...