序言

长度单位可以总体的分为绝对长度单位和相对长度单位。CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率。本篇文章试图整理在前端开发中用到的CSS单位和其应用场景。

px——像素

px是pixel缩写,是基于像素的单位。在浏览网页过程中,屏幕上的文字、图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。所以如果在定义字体大小时,使用px作为单位,那一旦用户改变显示器分辨率从800到1024,用户实际看到的文字就要变“小”(自然长度单位),甚至会看不清,影响浏览。

pt——磅

pt就是point,是印刷行业常用单位,等于1/72英寸。pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸,是一个绝对长度单位。

em——相对父元素

em单位是指其正在使用的字体大小。在一个页面上给定一个父元素的字体大小,这样就可以通过调整一个元素来成比例的改变所有元素大小.它可以自由缩放,比如用来制作可伸缩的样式表。

此处有一个关于【继承】的点需要注意:使用em设定宽高行高等属性的元素,其子元素继承的并不是em,而是其计算之后的值,这一点与使用百分号相同。而不添加单位,其子元素则继承的是百分比,子元素会根据其自身的字号计算得出对应属性值。具体看下面例子:

<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素内容
<div style="font-size:40px;background-color:red">
Web前端开发
</div>
</div>

当使用em时,最外层父元素的行高是1.5*16px=24px,同时其子元素继承了该line-height,效果图如下:

可以看出由于40px>24px,所以字体“溢出”了。而当不添加单位时:

<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素内容
<div style="font-size:40px;background-color:red">
Web前端开发
</div>
</div>

效果如下:

其行高会跟随自身字号进行计算,继承的只是“比例"。

rem——相对根元素

rem是指根元素(root element)的字体大小,它会随着父元素的字体大小变化而变化,减少了父子元素之间字体大小计算的复杂程度。由于根源素的默认字体大小是16px,为了方便计算,我们可以进行如下设置:

html{
font-size: 62.5%; /*10÷16*/
}
h1{
line-height: 24px;
line-height: 2.4rem;
}

IE9+ 和现代浏览器都已经支持了。

rem非常适合做web app的开发,其在web app中的具体应用请参见:

web app变革之rem

萌の宇 – mobile H5布局大全-rem flexbox详解

Flexbox——快速布局神器_flexbox, CSS3, layout 教程_w3cplus

vw和vh——相对浏览器窗口

vh等于viewport高度的1/100。例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px。当我们想设置跟随视口变化的字体,或是填满整个屏幕的div时,这个单位是非常有用的。

IE10+ 和现代浏览器都支持这两个单位。

vmin 和 vmax

vhvm总是与视口的高度和宽度有关,与之不同的,vminvmax是与这次宽度和高度的最大值或最小值有关,取决于哪个更大和更小。例如,如果浏览器设置为1100px宽、700px高,1vmin会是7px1vmax11px。然而,如果宽度设置为800px,高度设置为1080px1vmin将会等于8px1vmax将会是10.8px

IE10+ 和现代浏览器都已经支持vmin,webkit浏览器之前不支持vmax,现在已经支持,所有现代浏览器已经支持,但是IE全部不支持vmax。

ex 和 ch

exch的单位长度,依赖于特殊字符:

  • ch 字符0的宽度
  • ex 小写字符x的高度

font-family改变的时候这两个单位的值也会变化,不同字体表现的样式不一样。IE9+ 和现代浏览器都已经支持。

参考:7 CSS Units You Might Not Know About

   你可能没注意到的CSS单位 

CSS长度单位详解的更多相关文章

  1. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  2. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  3. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  4. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  5. 此博客使用的CSS样式详解!

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  6. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  7. 转:CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

  8. UI自动化测试(二)浏览器操作及对元素的定位方法(xpath定位和css定位详解)

    Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...

  9. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

随机推荐

  1. ubuntu server 12.04 源

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 deb http://mirrors.163.com/ubuntu/ precise  ...

  2. Code Blocks 使用 VC2013编译HelloWord

    首先在 Settings-Complier中把 Microsoft Visual c++ 2010 设置成默认(莫不默认也无所谓,就是改着方便而已) 然后在ToolChain excutable 中, ...

  3. ONES 安装、配置以及初始化配置

    环境依赖 bower composer php 5.5.9+ mysql 5.6.5+ PHP和MySQL版本均为最低要求版本,安装前请先确认. 通过CLI安装 $ git clone http:// ...

  4. PADS 导Gerber文件

    PCB也画了好几年,投板时都是直接发PCB文件,突然间客户让我导出Gerber文件, 一时半会还挺棘手的,上网不停的搜啊搜啊,虽然最终还是搞定了,但耽误了不少时间. 现总结下,把所有相关设置一步一步的 ...

  5. Android Studio的使用(十二)怎样打包项目

    1.在导航栏的Build下面找到Generate Signed APK...,进入该菜单栏即可. 2.生成Key Store安全钥匙和证书的管理工具. 3.如果已经有了Key Store证书,则可以直 ...

  6. Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率

    测试 目前主流的就bdd和tdd,自己查一下差异 推荐 mocha和tape 另外Jasmine也挺有名,angularjs用它,不过挺麻烦的,还有一个选择是qunit,最初是为jquery测试写的, ...

  7. Android media媒体库分析之:MediaProvider

    在做Android媒体应用程序时(Audio.Image.Video)需要对Android的媒体提供者(MediaProvider)做详细的分析,下面记录一下我的收获: 一.获取MediaProvid ...

  8. xshell 图形化连接ubuntu

    原文: http://jingyan.baidu.com/article/d45ad148967fcd69552b80f6.html Xmanager4系列软件是一套非常好的liunx远程操作,尤其是 ...

  9. HDU 2612 Find a way BFS,防止超时是关键

    之前我写的时候是:每找到一个‘@’就广搜一次,如果这样写有多少个‘@’就会广搜几次,这样就超时了.我队友告诉我应该打个表,这个方法确实不错.因为'Y'和'M'是唯一的,我通过这两个点分别广搜一次,对所 ...

  10. mysql 字符集配置

    查看和设置MySQL数据库字符集作者:scorpio 2008-01-21 10:05:17 标签: 杂谈 Liunx下修改MySQL字符集:1.查找MySQL的cnf文件的位置find / -ina ...