转自:https://blog.csdn.net/romantic_love/article/details/80868909

vw、vh、vmin、vmax是一种视窗单位,也是相对单位

它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,即单位1vw,代表类似于1%的视窗宽度。

备注: 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是设备上不包括工具栏和按钮的网页浏览器部分。

具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值(即相对于视窗中较短的一边)
vmax:当前 vw 和 vh 中较大的一个值 (即相对于视窗中较长的一边)

vmin、vmax应用场景:

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

-----------------------------------------------------------------------------------------------------

兼容性

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

移动设备
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月)

vw 、vh、vmin 、vmax的更多相关文章

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

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

  2. vw、vh、vmin、vmax、em、rem的使用详解

    转载自:https://blog.csdn.net/ZNYSYS520/article/details/76053961 1,vw.vh.vmin.vmax 的含义 (1)vw.vh.vmin.vma ...

  3. 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

     1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...

  4. css 单位px、em、rem、vh、vw、vmin、vmax区别

    1.px:相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2.em:相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. 看下面 ...

  5. 网页常见单位: px em pt % rem vw、vh、vmin、vmax , rem 使用

    1.网页常见单位:  px  em  pt    vw\vh   rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言  (最终解析单位) em单位名称为相对长度 ...

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

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

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

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

  8. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

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

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

随机推荐

  1. @ResponseBody将集合数据转换为json格式并返回给客户端

    spring-mvc.xml: <beans xmlns:mvc="http://www.springframework.org/schema/mvc" > <m ...

  2. Oracle12cWindows安装、介绍及简单使用(图文)

    1.下载 地址为:http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/index.html 含企业版和 ...

  3. 详谈redis优化配置和redis.conf

    1. Redis.conf 配置参数: #是否作为守护进程运行 daemonize yes #如以后台进程运行,则需指定一个pid,默认为/var/run/redis.pid pidfile redi ...

  4. Python初学总结

    下边的总结都是在python3上 一.基础 1.输出与输入: 输出:print(变量/字符串) 输入:input() 返回的是字符串 price=input() print(price) 2.pyth ...

  5. Android Framewrork资源类型有哪些?

    1. Google Framework res frameworks/base/core/res/res/values <public type="attr" name=&q ...

  6. 【Android 7.1.1】 锁屏界面点击“空白处”响应事件

    frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/stack/NotificationStackScrollLa ...

  7. linux显示文件列表命令ls,使用ls --help列出所有命令参数

    ls命令的相关参数 在提示符下输入ls --help ,屏幕会显示该命令的使用格式及参数信息: 先介绍一下ls命令的主要参数: -a 列出目录下的所有文件,包括以 . 开头的隐含文件. -A 显示除 ...

  8. GROUPING SETS与GROUP_ID

    SELECT E.DEPARTMENT_ID DID, E.JOB_ID JOB, E.MANAGER_ID MID, SUM(E.SALARY) SUM_SAL, COUNT(E.EMPLOYEE_ ...

  9. 有限制的最短路spfa+优先队列

    poj1724 ROADS Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10751   Accepted: 3952 De ...

  10. 新增form表单,post提交.2