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。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>VW&VH</title>
</head>
<style>* {padding: 0;margin: 0}.left {float: left;width: 50vw;height: 20vh;background-color: blue;text-align: center;line-height: 20vh;font-size: 3rem}.right {float: right;width: 50vw;height: 20vh;background-color: green;text-align: center;line-height: 20vh;font-size: 3rem}
</style><body><div class="left">left</div><div class="right">right</div>
</body></html>
css3自适应布局单位vw,vh相关推荐
- css3自适应布局单位vw,vh你知道多少?
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
- css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- html em vw,CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
- 前端学习(381):CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
- CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
- CSS3的新单位vw、vh、vmin、vmax
原文链接 一.基本说明 vw.vh.vmin.vmax的含义 (1)vw.vh.vmin.vmax是一种视窗单位,也是一种相对单位.它们相对的不是父节点或者页面的根节点,而是由视窗(Viewport) ...
- vh和vw自适应布局单位
在解决居中问题的时候,看到一种写法:100vh 先要弄懂它是什么就先看看什么是视口 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布 ...
- 视区单位vw, vh简介以及可实际应用场景
基本概念 vw和vh:视口单位中的"视口",桌面端指的是浏览器的可视区域,不包含任务栏标题栏以及底部工具栏的浏览器区域大小.1vw等于视口宽度的1%.1vh等于视口高度的1%. v ...
- css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
最新文章
- 六项任务、多种数据类型,谷歌、DeepMind提出高效Transformer评估基准
- 兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素...
- Kotlin问题解决
- write up 杂项:telenet
- oracle 定时清理表数据,关于Oracle存储过程和调度器实现自动对数据库过期数据清除的问题...
- 7-1 寻找大富翁 (25 分)(思路加详解+两种做法(一种优先队列,一种vector容器))
- python 提升效率_@Python 程序员,如何最大化提升编码效率?
- html文本框样式大全,HTML文本框样式大全
- 设单片机的晶振频率为6mhz c语言,单片机习题科学出版社.doc
- 五年26个版本:Linux系统内核全程回顾
- 中国五大顶级域名9月第一周新增3.2万 美国净减7.6万个
- EM 算法求解高斯混合模型python实现
- 通过 Nginx 来实现禁止国外IP访问网站
- vmware win7 iso 镜像文件下载
- 安卓调用百度地图服务
- Arduino基础入门篇(认识开发板和面包板)
- 浅谈“决策引擎”在身份管理的应用
- 毕设之基金定投小程序
- excel2003打开后找不到工作表
- Ribbon与Eureka整合分析(四)、客户端配置延迟加载和启用饥饿加载
热门文章
- 64位Ubuntu 12.04系统下安装Qt library和Qt Creator全过程记录
- 【Ubuntu16.04-opencv3.4.0-FDDB Evaluation】评测代码使用中遇到对‘cvxxx’未定义的引用问题
- Matlab 卷积函数 ——conv2
- NIOS II软核处理器
- ISO C99中的一些扩展(草稿)
- 从Linux到Meego
- 正则匹配问号_爬虫之正则表达式
- jquery上传图片_文件上传三种方式
- java语言_JAVA语言
- java的基础类库称为_JAVA基本类库介绍