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. PipeCAD Import IDF

    PipeCAD Import IDF eryar@163.com IDF/PCF文件是国际标准管道数据交换文件,主要用于isogen生成ISO图.目前主流设计软件都可以生成这些格式的文件,如PDMS. ...

  2. name和value的简单js用法

    name和value: 例如: <input type="text" name="txt"/> name用于定义这个input收到的值的变量名,在上 ...

  3. Eureka自我保护机制、健康检查的作用、actuator模块监控

    在上一篇文章微服务入门之服务的注册以及服务之间的调用中,我们基本实现了服务之间的调用,今天我们来了解一下Eureka自我保护机制以及健康检查. Eureka自我保护机制 接着以上篇文章建立的三个工程为 ...

  4. MySQL 报错：Translating SQLException with SQL state '42000', error code '1064', message

    MySQL报错详细日志 2019-09-12 16:42:29 [http-nio-80-exec-25] DEBUG [org.springframework.jdbc.support.SQLErr ...

  5. HDFS 数据错误与恢复

  6. 【转载】Linux Examination

    原博地址:https://blog.csdn.net/weixin_42568655/article/details/94603660 (来自我的同学QiaoGuangtong大佬) Fundamen ...

  7. 【Java爬虫】爬取南通大学教务处成绩

    没使用自动登录,所以获取是比较麻烦.. 1.http://jwgl.ntu.edu.cn/cjcx    进入官网,进行账号密码登录 2.点击全部成绩查询(也一定要点进去,不然cookie不会返回值) ...

  8. 在rabbitmq操作页面上添加队列、交换器及绑定示图

    1.添加队列 2.添加交换器 3.绑定

  9. 转var,let,const,js严格模式的详解

    最近看微信公众账号/知乎网上的文章说,现在的前端的人都注重用什么框架,一问原生js感觉都没有用到工作中.用不到的,学这些意义没有.上午我刚面试了一个前端,工作4年吧.最初是北大青鸟培训的,做后端.ne ...

  10. 前端（jQuery）（8）-- jQuery元素遍历

    1.向下遍历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...