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. UMP系统架构 Mnesia

  2. [Baltic2009]beetle【区间Dp】

    Online Judge:Bzoj1761 Label:区间Dp 题目描述 在一条直线上有N个点,每个点M升水. 一个虫子在坐标轴0点上,它每个单位时间移动一格,每个点的水每单位时间消失1升. 问虫子 ...

  3. Android开发 输入法调用学习

    方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Context. ...

  4. Django流程

    开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/polls/,接下来浏览器会把请 ...

  5. LoadRunner内部结构(1)

    LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm  翻译: LoadRunner内部结构 1,            被测系统是由驱动 ...

  6. 我眼中javascript的这些年

    写了两年多的js了吧,一开始的目标并没有很学术,我只想安安静静做个很厉害的开发者.但是总是沉溺在一种语言里,会让人误以为这种语言很厉害,就像只在村子里混的话,我觉得我自己可以逆天,村外有人,编程世界也 ...

  7. Java-slf4j:sfl4j

    ylbtech-Java-slf4j:sfl4j 1.返回顶部 1. SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种 ...

  8. day 42 01--CSS的引入方式及CSS选择器

    01--CSS的引入方式及CSS选择器   本节目录 一 CSS介绍 二 行内样式 三 内接样式 四 外接样式 五 CSS的选择器 六 CSS的高级选择器 七 CSS的属性选择器 八 CSS的伪类选择 ...

  9. Java之io nio aio 的区别

    这个问题最近面试总是遇到,作为一个只会写流水代码的程序员,一脸懵逼.看了网上的解释,看的还是很模糊,说下我对这个的理解. 先引出一个话题,两个大水缸,一个空一个满,让你把一个缸里面的水弄到另一个里面. ...

  10. ES6之主要知识点(二) 变量的解构赋值。默认值

    引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2 ...