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. MFC入门--显示静态图片及调用本地软件

    MFC是微软开发的基础类库,主要用来开发图形界面应用程序,在学习中,我们要验证算法好坏,一般需要对结果进行可视化. OpenCV是计算机视觉中的开源算法库,集成了很多先进算法,现在想将MFC与Open ...

  2. 《代码整洁之道》ch5~ch9读书笔记 PB16110698（~3.15） 第二周

    <代码整洁之道>ch5~ch9读书笔记 本周我阅读了本书的第5~9章节,进一步了解整洁代码需要注意的几个方面:格式.对象与数据结构.错误处理.边界测试.单元测试和类的规范.以下我将分别记录 ...

  3. 打开新窗口（window.open） open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法： window.open([URL], [窗口名称], [参数字符串])

    打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...

  4. Luogu P2822 组合数问题(前缀和)

    P2822 组合数问题 题意 题目描述 组合数\(C_n^m\)表示的是从\(n\)个物品中选出\(m\)个物品的方案数.举个例子,从\((1,2,3)\)三个物品中选择两个物品可以有\((1,2), ...

  5. java char <-> int

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

  6. CentOS6.3搭建ZooKeeper伪集群

    1. 将zookeeper安装包移动至/home, 解压后改名为zookeeper 相关命令 # 解压 .tar.gz # 重命名 zookeeper 2. 进入zookeeper/conf/目录下, ...

  7. 关于Cadence SPB 16.6 破解的一些关键步骤

    网上搜索到的破解方法,一般来说流程都是没有什么大问题的.较详细的一个破解流程可参照: http://www.mr-wu.cn/cadence-orcad-allegro-spb-16-6-instal ...

  8. 平衡树模板【splay的实现】

    [平衡树splay实现] 无注释代码 #include<bits/stdc++.h> using namespace std; typedef long long LL; ,MAXN=1e ...

  9. 深入浅出 Java Concurrency (34): 线程池 part 7 线程池的实现及原理 (2)[转]

    线程池任务执行流程 我们从一个API开始接触Executor是如何处理任务队列的. java.util.concurrent.Executor.execute(Runnable) Executes t ...

  10. double转String

    两种方式: 1.value = new DecimalFormat().format(double); 2.value = String.valueOf(double); 要相保留所有的double位 ...