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. mysql备份时的快照原理

    实际上实验的结果表明,这里的 the first such read指的是:对同一个表或者不同表进行的第一次select语句建立了该事务中一致性读的snapshot. 其它update, delete ...

  2. js的简单介绍和相关的必备常识

    一.概念 1.js是JavaScript的缩写,是运行在浏览器端或服务端的依附于页面的脚本语言. 2.js的学习分为:ECMA语法.Dom网页对象模型.Bom浏览器的对象模型 3.ECMA是浏览器厂商 ...

  3. JavaScript RegExp 对象的三种方法

    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...

  4. MyBatis配置文件(一)――properties属性

    MyBatis配置文件中有很多配置项,这些配置项分别代表什么,有什么作用,需要理一下了.先通过下面这个例子来看都有哪些配置项 <?xml version="1.0" enco ...

  5. Activiti实战03_Hello World

    Hello World如此经典,以至于几乎学习没一门新的技术都是从Hello World开始,可能意味着开启了新世界的大门吧,接下来就让我们一起步入到Activiti的世界中吧! 本文所使用开发环境 ...

  6. 设置eclipse自动补全

    点击" Window>Preferences"; 选择"Java>Editor>Content Assist",在右侧的"Auto- ...

  7. Luogu P2679 子串(字符串+dp)

    P2679 子串 题意 题目描述 有两个仅包含小写英文字母的字符串\(A\)和\(B\). 现在要从字符串\(A\)中取出\(k\)个互不重叠的非空子串,然后把这\(k\)个子串按照其在字符串\(A\ ...

  8. Winform 分页

    1.图列展示 2.分页控件代码 Paging.Designer.cs partial class Paging { /// <summary> /// 必需的设计器变量. /// < ...

  9. Jquery 判断值是否存在于数组之内

    var strArray=str.split(","); var fixed_init=function(v){ if($.inArray(v,strArray)==-1){ // ...

  10. 正确而又严谨得ajax原生创建方式

    自己去封装一个xhr对象是一件比较麻烦的事情.其实也不麻烦,注意逻辑和一个ie6兼容方案(可无),和一个304 其他2开头的status都可以就好了 <!DOCTYPE html> < ...