HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> 移动端开发知识[系列] - 谈谈相对单位,rem、em、vw、vh
上一篇:没有了 下一篇:移动端开发知识[系列] - 视口viewport

移动端开发知识[系列] - 谈谈相对单位,rem、em、vw、vh

2015/04/27 19:14:09 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:移动端开发,rem,em,相对单位,百分比

移动端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学堂 vw与vh H5course

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:没有了 下一篇:移动端开发知识[系列] - 视口viewport