注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】移动端H5知识普及[系列] - 谈谈相对单位  

2015-03-30 17:46:38|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

移动端H5知识普及 - 谈谈相对单位

前些日子,趁平日空隙书写了类库系列,这几天就来“普及”一下移动端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。

百分比

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

首先就是精确度的问题,采用百分比,很难和美工图保持一致。例如:一个横向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不兼容)

vw和vh

最后来介绍一下vw和vh

vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;

vh——viewpoint height,视窗高度,1vh等于视窗高度的1%;

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

移动端H5知识普及[系列] - 谈谈相对单位 - 独行冰海 - 独行冰海

 

 

欢迎大家互相学习交流。独行冰海

  评论这张
 
阅读(63)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017