移动端H5知识[系列] - 谈谈相对单位

HTML5学堂：移动端从2012年走到今日，已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者，除了能够处理传统平台的网站，还需要能够处理移动端的网页。可是，新的事物伴随着各个浏览器，也就冒出了各种兼容问题。一点点来学习吧~~~先来看看移动端的相对单位~！

前些日子，趁平日空隙书写了类库系列，这几天就来“普及”一下移动端HTML5开发的小知识吧~！虽然知识小，但是不得不承认的是，它们很重要~！

本系列共6篇文章，如下为标题列表：

1 谈谈相对单位

2 什么是视口

3 CSS3媒体查询

4 移动端“百变”盒模型

5 移动端“背景”妙用

6 移动端fixed定位模式

第一篇 谈谈相对单位

在我们此前开发PC端网站时，我们使用到的最多的单位就是px（像素）。像素属于绝对度量单位，就如同我们平时说的厘米一样~

当我们开始触及移动端时，免不了会遇到这样的问题——客户需要做一个320的移动端页面，于是我们傻傻的用绝对单位px书写了代码。好不容易实现了，客户说，480横屏的时候也得正常啊~！于是乎，我们整个人都不好了……

我是从2012年开始做移动端的页面的，应该说那时候的移动端，设备宽度还是320px的天下。还记得当时自己作移动端页面时，客户通常是不要求做320像素以上宽度的页面样式的，而唯一需要处理的就是纵向上的兼容（不同设备高度不同）。随着移动端的发展，在iPhone这个移动端先锋的引导下，屏幕从320像素宽度逐渐变大，而今的iPhone6 Plus已经达到了414*736的宽高比。而安卓系统的机器就更加奇葩，各类大小均有。于是乎，想用px此类绝对单位，实现一款兼容各个宽度的移动端页面，简直就是一个不可能完成的任务。

相对度量单位的出现很好的解决了这个问题。在这里，我把相对度量单位分为三种，一种是百分比，另一种是em和rem，最后一种是vw和vh。

欢迎沟通交流~HTML5学堂

百分比

百分比是我尝试解决上面这个问题时，最早尝试的方法。表面看上去似乎能够解决，但是实际上存在很大的问题。

首先就是精确度的问题，采用百分比，很难和美工图保持一致。例如：一个横向div被平均分为了三个部分，我们分别设置width为33.33%。640像素大小屏幕宽度的时候，33.33%就是213像素，那么3个213像素，只有639像素，从而造成1像素的误差。如果还设置了边框，也为百分比的话，那么此时，边框的粗细必然会产生一定的误差（在移动端最小单位是1像素）。

第二个问题：比例失调。如果说第一个微小的误差还是可以忽略的话，那么第二个问题就是不容小觑了。我们采用横向的百分比进行设置，但是纵向我们没有办法进行百分比的设置，于是，当设备比较大的时候，横向宽度变大，纵向宽度不变，导致整个网页比例失调。

em与rem

em：很不错的相对度量单位，但是计算起来实在费劲。em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。但是每一级别都需要如此计算，实在是让人很是头疼~

而后的rem，应该说让各个开发者眼前一亮，rem虽然也是和字体相关的相对度量单位，但是，它要比em使用起来更方便，rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，大大节省了我们计算字体大小的时间。（另外，当rem能够和JS去配合时，能够很好的解决移动端的各种像素大小问题——JS获取设备宽度，然后根据设备宽度调整html元素这个根元素的字体大小，在html元素中的所有元素，均使用rem相对度量单位）

rem的支持程度：IE9及以上所有浏览器，安卓2.1以上版本，iOS4.0以及以上版本的safari（换句话说，IE6-8不兼容）

关于rem的取整，推荐同事的这篇博文《关于rem小数点 》

vw和vh

最后来介绍一下vw和vh

vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；

vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；

vw、vh是针对移动设备的，如果视窗大小发生变化，这两个值也会跟着相应的变化。应该说，这两种单位非常好用，在项目中，自己采用vw和vh之后，瞬间兼容所有设备，心情大好，不过~~~查阅基本兼容列表之后，只能呵呵一笑~（兼容情况如下）。不过，估计在不久的未来，随着移动端的迅速发展，vw和vh会逐渐代替rem吧~~~

欢迎沟通交流~HTML5学堂