H5_0025:css3自适应布局单位vw,vh
视口单位(Viewport units)
什么是视口?
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
根据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。
H5_0025:css3自适应布局单位vw,vh的更多相关文章
- css3自适应布局单位vw,vh
css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...
- css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- [转]css3自适应布局单位vw,vh你知道多少?
原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...
- CSS3自适应字体大小(vw vh)
viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...
- css---【vw,vh】进行自适应布局单位
在进行CSS3自适应布局,会用到 vw 和 vh 进行布局 视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:L ...
- 视区相关单位vw, vh..简介以及可实际应用场景
这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...
- 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭
一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...
- Css3中自适应布局单位vh、vw
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
随机推荐
- VirtualBox 安装ghost版windows XP
昨天尝试在VirtualBox中安装深度技术的GhostXP SP3 V8.02版本的系统,可是安装过程中出现了问题,无法安装,错误提示如下图: 昨天搞了一会,没有结果,今天对于这个无法安装的问题耿耿 ...
- ubuntu 如何添加alias
公司的nx 上面一般使用gvim 编辑文件.并且为gvim 增加了alias,只要敲 g 就是gvim 的意思,这样编辑一个文件只需要 g xxx.v 就可以了.非常方便. 在自己电脑上安装了ubun ...
- 斐波那契数列(php实现)
描述 斐波那契数列指的是这样一个数列:1.1.2.3.5.8.13.21.34... 规则 : 有N个数,第i个数的值 N(i)= N(i-1) + N(i-2) 需求: 给出下标i ,求第i 的个数 ...
- Codeforces Round #470 (Div. 2) A Protect Sheep (基础)输入输出的警示、边界处理
Bob is a farmer. He has a large pasture with many sheep. Recently, he has lost some of them due to w ...
- kendo ui - core
通过CDN 引入kendo-ui-core git地址:http://www.telerik.com/kendo-ui<link href="http://kendo.cdn.tele ...
- Django ORM各种查询
正向和反向查询 正向 ----> 关联字段在当前表中,从当前表向外查叫正向 反向 —> 关联字段不在当前表中,当当前表向外查叫反向 正向通过字段,反向通过表名查 表结构 from djan ...
- NLP(二十一)人物关系抽取的一次实战
去年,笔者写过一篇文章利用关系抽取构建知识图谱的一次尝试,试图用现在的深度学习办法去做开放领域的关系抽取,但是遗憾的是,目前在开放领域的关系抽取,还没有成熟的解决方案和模型.当时的文章仅作为笔者的 ...
- Thingsboard源码安装部署
交流QQ群 如果安装有其他问题,可以到QQ群求助 环境安装 开发环境要求:Jdk 1.8版本Postgresql 9以上Node.jsNpmMaven 3.6以上Git工具Idea开发工具 JDK 下 ...
- Thread Based Parallelism - Thread Synchronization With Lock
Thread Based Parallelism - Thread Synchronization With Lock import threading shared_resource_with_lo ...
- k8s 开船记-全站登船:Powered by .NET Core on Kubernetes
今天 18:30 左右,我们迈出了 kubernetes 航行的关键一步——全站登船,完成了全站应用从 docker swarm 集群向 k8s 集群的切换,以前所未有的决心与信心重新开起这艘巨轮,而 ...