在进行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。

vh/vw与%的区别:

css---【vw,vh】进行自适应布局单位的更多相关文章

  1. css3自适应布局单位vw,vh

    css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...

  2. css3自适应布局单位vw,vh你知道多少?

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  3. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  4. [转]css3自适应布局单位vw,vh你知道多少?

    原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...

  5. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  6. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  7. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  8. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  9. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. win10开机启动vmware虚拟机【亲测可用】

    创建vbs脚本放到开机启动目录: set ws=createobject("wscript.shell") ws.run """C:\Program ...

  2. free - 显示系统内存信息

    free - Display amount of free and used memory in the system 显示系统中空闲和已使用内存的数量 格式: free [options] opti ...

  3. JavaWeb项目前后端分离

    前戏   前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦, 并且前后端分离会为以后的大型分布式架构.弹性计算架构.微 ...

  4. Jmeter连接MYSQL数据库,并进行数据库的操作;

    1.在操作jmeter连接mysql数据库之前,我们需要到网上下载一个jar包.并且添加到测试计划里:mysql-connector-java-5.1.13-bin.jar;把这个jar放到jmete ...

  5. git---如何解决The authenticity of host can't be established.

    新生成密钥的时候,git clone或者push的时候,可能会报这样的错误: ``` The authenticity of host 'gitee.com (xxx.xxx.xxx.xxx)' ca ...

  6. 项目Beta冲刺(团队)——总结篇

    项目Beta冲刺(团队)--总结篇 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:Beta冲刺总结 团队信息 队员学号 ...

  7. Mysql五大约束

    Mysql五大约束 约束:对表中数据的限制.保证表中数据的准确和可靠 (1)NOT NULL:非空,用于保证该字段的值不能为空 (2)DEFAULT:默认,用于保证该字段有默认值(3)PRIMARY ...

  8. linux定时任务(转)

    转自:https://www.cnblogs.com/intval/p/5763929.html linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非 ...

  9. SpringBoot整合Spring Data Elasticsearch

    Spring Data Elasticsearch提供了ElasticsearchTemplate工具类,实现了POJO与elasticsearch文档之间的映射 elasticsearch本质也是存 ...

  10. Dart 库预览

    容导航 dart:core - numbers, collections, strings, and more dart:async - asynchronous programming dart:m ...