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. Linux实现自动登录

    使用expect实现自动登录的脚本,网上有很多,可是都没有一个明白的说明,初学者一般都是照抄.收藏.可是为什么要这么写却不知其然.本文用一个最短的例子说明脚本的原理. 脚本代码如下: #!/usr/b ...

  2. HZOI20190722 B visit 组合数+CRT合并

    题目:https://www.cnblogs.com/Juve/articles/11226266.html solution: 30%:dp 设dp[k][i][j]表示经过k时间,在(i,j)的方 ...

  3. java填坑记录

    一.The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the ...

  4. java mat复制问题

    意外的发现 org.opencv.core.Mat projectionMat = mat ;//曲线救国,获取同样一个mat projectionMat.setTo());//然后再把颜色换成白色 ...

  5. oracle数据库忘记sys密码如何改密码

    ORACLE服务器操作: 1.win+R打开dos窗口cmd 2.输入 sqlplus/nolog出现 3.输入 conn / as sysdba 出现 4. alter user sys ident ...

  6. kafka例子程序

    //生产端 产生数据 /** * Licensed to the Apache Software Foundation (ASF) under one or more * contributor li ...

  7. 跟我一起了解koa(一)

    安装koa2 1.初始化package.json npm init 2.新建app.js,并且安装koa cnpm install --save koa //app.js const koa = re ...

  8. PYTHON__ ITERTOOLS模块

    组成 总体,整体了解 无限迭代器 迭代器 参数 结果 例子 count() start, [step] start, start+step, start+2*step, ... count(10) - ...

  9. angular依赖注入（1）——从父元素到子元素的数据注入

    1.什么是依赖注入? 依赖注入是一种编程模式,可以让类从外部源中获得它的依赖,不必亲自创建他们. (这就达到了一个效果,我不知道我是怎么实现的,但我创建了一个实现他的接口,然后接口封装起来,1.可以分 ...

  10. 移动端“响应式布局”’--rem

    使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...