发现视口(窗口)自适应的新大陆!!vw、vh
从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写js页获取高度实现。有一天在看网上的也个页面,突然看到了vh引起了我的关注,网上查了查资料对于控制长度的值不止有px、rem、em等等,瞬间感觉好落伍。。。接下来带着大家回顾一下css中的长度单位。
一、单位介绍
| em | 相对长度单位。相对于当前对象内文本的字体尺寸。 
 | |
| ex | 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。 
 | |
| cm | 厘米(Centimeters)。绝对长度单位。 | |
| mm | 毫米(Millimeters)。绝对长度单位。 | 
 | 
| q | 1/4毫米(quarter-millimeters)。绝对长度单位。 | |
| in | 英寸(Inches)。绝对长度单位。 | |
| pt | 点(Points)。绝对长度单位。 | |
| pc | 派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。 | |
| px | 相对长度单位。像素(Pixels)。[常用] | |
| ch | 数字“0”的宽度 | |
| rem | 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 | |
| vh | 相对于视口(窗口)的高度;全屏就是100vh | |
| vw | 相对于视口(窗口)的宽度;全屏就是100vw等同于100%; | |
| vmax | 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax | |
| vmin | 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin | |
二、兼容性(vh、vw、vmax、vmin)
  vw, vh, vmin(vm)这几个视区相关单位,在2017年12月26号这天的兼容性为:Chrome 49+, IE11部分支持、Edge16+、Fairefox56+、Chrome49+、safair10.1+、ios Safari10.2+ 等等。
发现视口(窗口)自适应的新大陆!!vw、vh的更多相关文章
- css3自适应布局单位vw,vh
		css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ... 
- CSS3自适应字体大小(vw vh)
		viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ... 
- 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端,指的 ... 
- H5_0025:css3自适应布局单位vw,vh
		视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ... 
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
		原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ... 
- 视区相关单位vw, vh..简介以及可实际应用场景
		这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ... 
- rem布局原理深度理解(以及em/vw/vh)
		一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ... 
随机推荐
- Classifier
			1.视频:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-2-classifier/ 2.敲了代码,但是运行结果不懂,明 ... 
- bing词典vs有道词典对比测试报告——功能篇之细节与用户体验
			之所以将细节与用户体验放在一起讨论,是因为两者是那么的密不可分.所谓“细节决定成败”,在细节上让用户感受方便.舒适.不费心而且温馨,多一些人文理念,多一些情怀,做出来的产品自然比其他呆板的产品更受欢迎 ... 
- 20135234mqy     实验二 Java面向对象程序设计
			北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1352 姓名:mqy 学号:20135234 成绩: 指导教师: ... 
- python接口测试之requests库(一)
			一.requests库的安装 requests库作为第三方库,需要安装 cmd模式下,运行pip install requests 二.在学习如何发送请求之前,我们先来了解一下requests库,查看 ... 
- Linux里的2>&1的理解
			转载自:https://blog.csdn.net/ggxiaobai/article/details/53507530 我们在Linux下经常会碰到nohup command>/dev/nul ... 
- javascript中的call(),apply(),bind()方法的区别
			之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ... 
- spring冲刺第六天
			昨天编写地图代码,完善地图界面,使其变得美观. 今天把地图界面初步完成,和其他团队成员的成果进行结合,整合人物和地图代码. 遇到的问题:在整合时遇到的问题比较多,今天没有整合成功. 
- class 3 求数组中的最大值(单元测试)
			1.问题引出: int Largest(int list[], int length) { int i,max; ; i < (length – ); i ++ ) { if(list[i] & ... 
- 文件上传到tomcat服务器 commons-fileupload的详细介绍与使用
			三个类:DiskFileUpload.FileItem和FileUploadException.这三个类全部位于org.apache.commons.fileupload包中. 首先需要说明一下for ... 
- Leetcode题库——27.移除元素
			@author: ZZQ @software: PyCharm @file: removeElement.py @time: 2018/9/23 14:04 要求:给定一个数组 nums 和一个值 v ... 
