vw 相对于视窗的宽度：视窗宽度是100vw；vh则类似，是相对于视窗的高度，视窗高度是100vh.

这里的视窗指的又是啥？

是浏览器内部宽度大小(window.innerWidth)？

是整个浏览器的宽度大小(window.outerWidth)？

还是显示器的宽度大小(screen.width)？

   “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

移动端的vh 和 vw简介和使用场景的更多相关文章

  1. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  2. CSS 中的rem，em，vh，vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  3. vh、vw、vmin、vmax 知多少

    介绍一些 CSS3 新增的单位,平时可能用的比较少,但是由于单位的特性,在一些特殊场合会有妙用. vw and vh 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1 ...

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

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

  5. [翻译]使用VH和VW实现真正的流体排版

    前言 不像响应式布局,通过media query,设置几个变化点来适配,流体排版通过调整大小,适配所有设备宽度.这个方法可以使我们开发的网页,在几乎所有屏幕尺寸上都可以使用.但出于一些原因,它的使用率 ...

  6. 认识 vh 和 vw 单位

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

  7. [转帖]kafka入门：简介、使用场景、设计原理、主要配置及集群搭建

    kafka入门:简介.使用场景.设计原理.主要配置及集群搭建 http://www.aboutyun.com/thread-9341-1-1.html 还没看完 感觉挺好的. 问题导读: 1.zook ...

  8. TYPESDK手游聚合SDK服务端设计思路与架构之一：应用场景分析

    TYPESDK 服务端设计思路与架构之一:应用场景分析 作为一个渠道SDK统一接入框架,TYPESDK从一开始,所面对的需求场景就是多款游戏,通过一个统一的SDK服务端,能够同时接入几十个甚至几百个各 ...

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

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

随机推荐

  1. sql错误;The user specified as a definer ('tester'@'%') does not exist

    在复制和导数据库时提示错误:SELECT command denied to user 'tester'@'%' for column 'uID' in table 'view_enterprise_ ...

  2. 装配SpringBean(五)--注解装配之自动装配

    在spring ioc容器中,spring要先完成bean的定义和生成,然后需要需要注入的资源,在上一篇的扫描组件中就是这样实现的.而自动装配中我们只需要定义和生成一个bean,发现bean的过程将由 ...

  3. compareTo)--list 根据某字段排序

    Collections.sort(actList, new Comparator<Act>() { @Override public int compare(Act o1, Act o2) ...

  4. css3之文本和颜色功能之text-overflow,word-wrap

    语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...

  5. HDFS 名称节点的启动

  6. js作用域的销毁、不立即销毁、不销毁

    JavaScript中的函数执行会形成私有的作用域. (1)作用域的销毁 一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间 (2)作用域的不立即销毁 functio ...

  7. 7 个令人兴奋的 JavaScript 新特性

    前言 一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4五个阶段,每个阶段提交至下一阶段都需要TC39审批通过.本文介绍这些新特性处于Stage 3或者Stage 4阶段,这 ...

  8. hibernate hql语句 group by having 的坑

    我期望获得这个列表 然而,使用hql只能获得第一条数据,后来我琢磨了一下,和group by有关系 应该改成 成功查询到

  9. Zookeeper安装过程

    zookeeper的安装我反反复复安装了三次,前两次在root用户下安装都失败了,都启动不起来,第三次我改成普通用户安装,没想到成功了,很不可思议,步骤完全一样,接下来介绍一下具体的安装步骤: 1. ...

  10. Leetcode501.Find Mode in Binary Search Tree二叉搜索树中的众数

    给定一个有相同值的二叉搜索树(BST),找出 BST 中的所有众数(出现频率最高的元素). 假定 BST 有如下定义: 结点左子树中所含结点的值小于等于当前结点的值 结点右子树中所含结点的值大于等于当 ...