css3自适应布局 单位vw/vh

视口单位(Viewport units)

什么是视口?

视口单位中的“视口”,在PC端,视口指的是浏览器的可视区域;在移动端,指的就是Viewport中的Layout Viewport;移动端涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

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

根据CSS3规范,视口单位主要包括以下4个:

1.vw:1vw等于视口宽度的1%。

2.vh:1vh等于视口高度的1%。

3.vmin:选取vw和vh中最小的那个。

4.vmax:选取vw和vh中最大的那个。

vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

(0)

相关推荐

  • 移动端网页基础

    移动端 一.移动端背景 1.浏览器 2.手机屏幕 二.视口 1.布局视口layout viewport 2.视觉视口 3.理想视口 4.meta标签 三.物理像素和物理像素比 1.物理像素:分辨率 2 ...

  • vue cli4 使用 postcss-px-to-viewport 实现vw适配

    安装 postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev 在项目的根目录下创建一个 postcss.config. ...

  • 吃透移动端 H5 响应式布局

    大迁世界 1周前 大迁世界我要先坚持分享20年,大家来一起见证吧.564篇原创内容公众号作者: suoyuesmile https://github.com/suoyuesmile/suo-blog/ ...

  • python测试开发django-134.CSS页面布局:左侧固定,右侧自适应布局

    前言 常见的后台管理页面,左侧固定宽度展示操作菜单栏,右侧显示左侧展示管理内容. 这是一种最常见的左侧固定,右侧自适应布局方式. 左侧固定,右侧自适应布局 在container1里面写2个div &l ...

  • 风水企、事业单位最佳立门调整气场速发布局法

    A.最佳方位选定方法 这一讲与上面几讲都有密切的联系,上面几讲弄通了,就有了大致轮廓,所以在学习这一讲时.应与上面几讲相互融会贯通,方可应用自如.但提醒大家注意,我所说的只是"联系" ...

  • 图书出版单位如何应对和布局听书时代

    题目:图书出版单位如何应对和布局听书时代 来源:2019年第2期"媒介融合" 作者:赵宏源 单位:上海数字世纪网络有限公司 DOI:10.19619/j.issn.1007-938 ...

  • CSS3全览_最新布局

    目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiaxiangx/ 1. 浮动 ...

  • 电工电气必备常用计算公式与单位

    电工常用单位与公式都在这里,你记得几个?快来盘点下! 01 电功 表示电流在一段时间内通过某一电路,电场力所做的功.电能转化成多种其他形式能的过程也可以说是电流做功的过程,有多少电能发生了转化就说电流 ...

  • 第十六届文津图书奖出炉 17家出版单位的20种图书入选

    近日,第十六届文津图书奖图书揭晓, 17家出版单位的20种图书入选. 第十六届文津图书奖获奖图书 No. 01. 史前的现代化:从狩猎采集到农业起源 作者:陈胜前 著 出版社:生活·读书·新知三联书店 ...

  • 事业单位公共基础知识:人文常识之楚辞

    在各种考试中,一般都会涉及一些人文常识的题目,考查方式主要以识记性为主,但由于考察内容涉及的知识范围较广.例如一些文学著作知识,对于很多考生来说部分题目还是比较难.现就文学著作中的楚辞的部分知识梳理如 ...

  • 工伤事故中用人单位的认定...广州法院发布劳动争议十大典型案例

    烟语法明 昨天 案例一 筹备期是否计入工作年限? 某网络公司于2018年1月11日成立,戴一(化名)于2017年11月13日开始负责该网络公司的筹建工作.双方签订书面劳动合同,合同中约定:合同期限为2 ...

  • 九江这里成为区级粤菜美食集聚区创建单位!速来品尝→

    九江儒林湾上榜 区级粤菜美食集聚区创建单位! 据悉,为做好粤菜师傅美食集聚区建设的相关工作,南海区经济促进局开展了第二批南海区区级粤菜美食集聚区创建单位认定工作.经推荐和审核,将金沙洲金铂天地.嘉洲广 ...