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. nodejs + mySQL实践

    1.建立数据库连接:createConnection(Object)方法      该方法接受一个对象作为参数,该对象有四个常用的属性host,user,password,database.与php中 ...

  2. 如何用SPSS做联合分析

    如何用SPSS做联合分析 如果产品的描述是由几个属性特征决定的,比如说mp3的音质.外形.容量.价格等等,商家为了确定哪个属性对消费者的影响最大,以及预测什么样的属性组合最受消费者的欢迎,选择的办法应 ...

  3. python-基础-字符串-列表-元祖-字典

    1 字符串 1.1 下标和切片 1.2 切片 1.3 字符串常见操作 如有字符串mystr = 'hello world itcast and itcastcpp',以下是常见的操作 <1> ...

  4. Hadoop Serialization -- hadoop序列化详解 (2)【Text,BytesWritable,NullWritable】

    回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...

  5. 更好用的集群限流功能，Sentinel 发布 v1.4.2

    摘要: 感谢 Sentinel 社区的贡献者们 ️ Sentinel 发布 v1.4.2 正式发布,该版本主要变更如下: 特性/功能改进 新增 Zuul 1.x 适配模块(sentinel-zuul- ...

  6. LUOGU P1779 魔鬼杀手_NOI导刊2010提高（03）

    传送门 解题思路 背包,首先先用aoe都打残然后单伤补刀,用f[i]表示AOE打了i的伤害的最小花费,g[i]表示单伤打了i的伤害的最小花费. 代码 #include<iostream> ...

  7. NOIP2017解题报告

    啊不小心点发布了,懒得删了就这样吧,虽然还没写完,也不打算写了大概. d1t1 结论题 没什么好说的 d1t2 模拟 没什么好说的 d1t3 70分算法其实比较好想. 没有0边,就跑最短路,然后按di ...

  8. html5绘图工具选择

    1. Chart.js 基于html5, 完全开源免费 功能过于简单,只有6种图,能满足小系统需求,使用简便,效果比较炫. http://www.bootcss.com/p/chart.js/ 2. ...

  9. Hdu 1403(后缀数组）

    题目链接 Longest Common Substring Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  10. LintCode_41 最大子数组

    题目 给定一个整数数组,找到一个具有最大和的子数组,返回其最大和. 注意事项 子数组最少包含一个数 样例 给出数组[−2,2,−3,4,−1,2,1,−5,3],符合要求的子数组为[4,−1,2,1] ...