像 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. Python远程连接MySQL数据库

    使用Python连接数据库首先需要安装Python的数据库驱动. 我的本地只装了Python,并没有装MySQL,当我使用命令: sudo pip install mysql-python 安装驱动( ...

  2. Nginx实现高可用(了解)

    使用nginx实现反向代理和负载均衡时,nginx就是整个网站的入口了,所以需要保证nginx的高可用 主要资料包:链接:https://pan.baidu.com/s/1z_-xEM3uUICtZi ...

  3. Python(Head First)学习笔记:六

    6 定制数据对象:数据结构自定义 打包代码与数据 james2.txt: James Lee,2002-3-14,2-34,3:21,2.34,2.45,3.01,2:01,2:01,3:10,2-2 ...

  4. 【最新】破解微信小程序,获取微信小程序源码,破解微信wxapkg,仅需5秒

    一个后端第一次接触iview,就简单写了个网站. 之前看到有人发解析wx小程序源码包的软件,但是因为微信的升级,之前的办法已经不行了.现在重新改了js文件,适配了最新的版本. 之前微信wxapkg包获 ...

  5. 分别设计点类Point和圆类Circle,点类有两个私有数据纵坐标和横坐标;圆类有也两个私有数据圆心和半径,其中圆心是一个点类对象;要求如下所述: (1) 通过构造方法初始化数据成员,数据成员的初始化通过构造方法的参数传递;(2) 分别编写点和圆的输出函数,其中圆的输出包括圆心和半径的输出;点的输出x,y;

    题目相对简单: package naizi; public class Circle { //私有成员及构造方法 private Point center; private int r; Circle ...

  6. [VB.NET Tips]字符串转换为日期

    有些字符串需要转换成日期,或者整型转换为日期,可以参考如下思路: Dim result As Date Dim source As String = "20190515" resu ...

  7. 采用redis生成唯一且随机的订单号

    项目描述 最近做的一个项目有这么一个需求:需要生成一个唯一的11位的就餐码(类似于订单号的概念),就餐码的规则是:一共是11位的数字,前面6位是日期比如2019年07月20就是190720,后面五位是 ...

  8. Spring Cloud Gateway 之请求坑位[微服务IP不同请求会失败]

    问题产生背景 在使用Spring Cloud Gateway过程中,希望配置多Routes映射不同的微服务,因为Gateway 和Zuul的访问路径不同(zuul 会带有服务service Id),造 ...

  9. 素数路径Prime Path POJ-3126 素数,BFS

    题目链接:Prime Path 题目大意 从一个四位素数m开始,每次只允许变动一位数字使其变成另一个四位素数.求最终把m变成n所需的最少次数. 思路 BFS.搜索的时候,最低位为0,2,4,6,8可以 ...

  10. C++ new和malloc的区别

    1.new关键字是C++中的一部分,malloc是由C库提供的函数: 2.new是以具体类型为单位进行内存分配,malloc只能以字节为单位进行内存分配: 3.new在申请单个类型变量时可进行初始化, ...