从事前端已经1年了,一直为背景自适应铺满整个屏幕而苦苦发愁,因为要适配不同的pc显示器,所以高度不能写死,但是写(height:100%)并不能实现,愁死我了~我要不用写好的css框架实现或者自己写js页获取高度实现。有一天在看网上的也个页面,突然看到了vh引起了我的关注,网上查了查资料对于控制长度的值不止有px、rem、em等等,瞬间感觉好落伍。。。接下来带着大家回顾一下css中的长度单位。

一、单位介绍

em 相对长度单位。相对于当前对象内文本的字体尺寸。

  • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
 
ex 相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

  • 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
 
cm 厘米(Centimeters)。绝对长度单位。  
mm 毫米(Millimeters)。绝对长度单位。
  • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
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)

  vwvhvmin(vm)这几个视区相关单位,在2017年12月26号这天的兼容性为:Chrome 49+, IE11部分支持、Edge16+、Fairefox56+、Chrome49+、safair10.1+、ios Safari10.2+ 等等。

发现视口(窗口)自适应的新大陆!!vw、vh的更多相关文章

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

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

  2. CSS3自适应字体大小(vw vh)

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...

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

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

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

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

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

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

  6. H5_0025:css3自适应布局单位vw,vh

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

  7. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  8. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  9. rem布局原理深度理解(以及em/vw/vh)

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

随机推荐

  1. 2018年第九届蓝桥杯【C++省赛B组】

    2标题:明码 汉字的字形存在于字库中,即便在今天,16点阵的字库也仍然使用广泛.16点阵的字库把每个汉字看成是16x16个像素信息.并把这些信息记录在字节中. 一个字节可以存储8位信息,用32个字节就 ...

  2. 20135316王剑桥 linux第四周课实验笔记

    第三章 程序的机器级表示 3.1历史观点 Intel处理器的换代:8086——80286——i386——i486——Pentium——PentiumPro——PentiumII——PentiumIII ...

  3. 关于echart柱形图的使用问题

    关于一个数据对应两个值的问题 series: [{ name: '数量(个)', type: 'bar', barWidth: '30%', barGap: , //两个数据条没有间距 data: y ...

  4. MAVEN ERROR maven-resources-plugin

    maven新建项目时报错 Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin: ...

  5. HttpContext.Current.Server.MapPath("/") 未将对象设置到对象的实例异常。

    多线程中的System.Web.HttpContext.Current.Server.MapPath("/") 多线程中Server.MapPath会失效... 网上找到几种解决方 ...

  6. 全选练习-原生版和jQuery

    今天来做一些练习,做全选练习 原生版的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. Construct BST from given preorder traversal

    Given preorder traversal of a binary search tree, construct the BST. For example, if the given trave ...

  8. [二十七]SpringBoot 之 Restful接口的跨域请求

    什么是跨域 简单的说即为浏览器限制访问A站点下的js代码对B站点下的url进行ajax请求.比如说,前端域名是www.abc.com,那么在当前环境中运行的js代码,出于安全考虑,访问www.xyz. ...

  9. P2129 L国的战斗续之多路出击

    题目描述 这一次,L国决定军队分成n组,分布在各地,若以L国为原点,可以看作在一个直角坐标系内.但是他们都受统一的指挥,指令部共发出m个命令.命令有移动.上下转移和左右转移(瞬移??),但是由于某些奇 ...

  10. BZOJ 1898: [Zjoi2005]Swamp 沼泽鳄鱼

    1898: [Zjoi2005]Swamp 沼泽鳄鱼 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1085  Solved: 604[Submit][S ...