1.相对于视口的宽度。视口被均分为100单位的vw

h1 { font-size: 8vw; }

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

2.相对于视口的高度。视口被均分为100单位的vh

h1 { font-size: 8vh; }

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

3.相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

h1 { font-size: 8vmax; }

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。

4.相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

h1 { font-size: 8vm; font-size: 8vmin; }

如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

兼容性：

vw单位相关的更多相关文章

  1. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  2. 关于使用vw单位适配H5项目（二）

    一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配, ...

  3. 和我一起使用postcss+gulp进行vw单位的移动端的适配

    随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于 ...

  4. webpack的像素转vw单位的loader插件

    安装: npm i px2vw-view-loader 配置: 按以下loader格式,添加进入webpack配置文件,实现从px转换成vw,适用于移动端项目 module: { rules: [{ ...

  5. 【前端适配】vw单位移动端适配方案

    近些年移动端的强势崛起,导致移动端适配越来越重要,个人之前一直使用的是rem进行适配,但是发现并不是非常完美,给力的是大漠老师写了一篇<如何在Vue项目中使用vw实现移动端适配>,比较完美 ...

  6. 解决uc浏览器不支持vw单位的方法

    插入下段代码,使用rem来代替vw <script type="text/javascript"> (function (doc, win) { var docEl = ...

  7. 认识 vh 和 vw 单位

    1. 页面 html 结构 <header> <h1>欢迎来到米修在线</h1> <p>Lorem ipsum dolor sit amet conse ...

  8. 基于react/vue的移动端终极适配方案vw单位（更新css-modules配置）

    传送门:  https://segmentfault.com/a/1190000014185590

  9. vue项目使用vw单位适配移动端方法

    传送门:  https://blog.csdn.net/zjw0742/article/details/79337336

随机推荐

  1. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  2. java char <-> int

    int = char - '0' or Character.getNumericValue(char ch) char = (char)int

  3. LoadRunner参数化详解【转】

    距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...

  4. LR回放webservice脚本报错------------mmdrv.exe应用程序错误（未解决）

    1.录制完成webservice脚本如下: 2.回放脚本,报错: 3.网上查看了一些解决办法,但都是没有起到作用.

  5. java内存模型JMM理解整理

    什么是JMM JMM即为JAVA 内存模型(java memory model).因为在不同的硬件生产商和不同的操作系统下,内存的访问逻辑有一定的差异,结果就是当你的代码在某个系统环境下运行良好,并且 ...

  6. bzoj1913: [Apio2010]signaling 信号覆盖

    传送门 题解传送门 //Achen #include<algorithm> #include<iostream> #include<cstring> #includ ...

  7. 杂项-VOD：VOD（视频点播）

    ylbtech-杂项-VOD:VOD(视频点播) 视频点播是二十世纪90年代在国外发展起来的,英文称为“Video on Demand”,所以也称为“VOD”.顾名思义,就是根据观众的要求播放节目的视 ...

  8. Error-IDEA：“Import from external model” 与 “Create from existing source”的区别

    ylbtech-Error-IDEA:“Import from external model” 与 “Create from existing source”的区别 1.返回顶部 1. “Import ...

  9. Django项目: 2.模板抽取

    为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% blo ...

  10. QC的安装和配置

    QC(Quality center)的安装配置 Wmware 虚拟机 数据库SQL server2000 Windows server 2003 须安装数据库的sp4补丁包 注意事项 数据库安装时选择 ...