培训服务 | PMP认证 | PgMP认证 设为首页 收藏本站 关于我们 联系我们
浅淡HTML5移动Web开发
发布者:佚名 来源:设计达人 点击: 发表日期:2014-12-26

  说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案。

  

  1. 响应式web设计

  说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中显示,后者则采用百分比。关于这两者讨论的文章很多,有兴趣的自己查阅下,我今天要介绍的就是相信你已经听过的”响应式布局”,响应式布局意味着媒体查询,这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。

  响应式web设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样,将已有的技术重新组合发挥新的作用。

  (1).媒体查询初探。媒体查询并非新出现的技术,如下:

  

  其中就使用了媒体查询,通过 标签的media属性为样式表指定了设备类型,当然CSS3时代的媒体查询更加丰富。

  

  发现了他们的区别吗?对,不只是针对设备进行适配,而且加了一个条件,就是当设备纵向放置的时候才匹配,咱们再看一个。

  

  大家会发现我们又拓展了一个条件,对,就是当设备屏幕的宽度大于960px才会加载style.css样式文件。我们究竟有哪些特性是可以被探测到的呢?下面列了一部分供大家参考(参考自http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询):

  - width 视口宽度

  - height 视口高度

  - device-width 设备屏幕的宽度

  - device-height 设备屏幕的高度

  - orientation 检测屏幕处于横屏还是竖屏

  - aspect-ratio 基于视口的宽高比例

  - device-aspect-ratio 基于设备屏幕的宽高比

  - color 颜色的位数,如min-color:32 匹配设备是否有32位或以上的颜色

  - color-index 设备的颜色索引表中的颜色数

  - monochrome 检测单色振缓冲区中每像素使用的位数。为非负数,如monochrome:3

  - resolution 检测屏幕或打印机的分辨率,如min-resolution:300dpi(dpi后面会介绍),也可以是每厘米像素点的度量值,如min-resolution:120dpcm

  - scan 扫描方式,值为progressive(逐行扫描)、interlace(隔行扫描)

  - grid 检测输出设备是网格设备还是位图设备

  创建媒体查询时,上述特性(scan和grid不行)都可以加上min和max前缀创建媒体查询的范围。除了link标签能够进行媒体查询,是不是还有其它的呢,答案是Yes 。html中的meta标签,此前我们常用的应该是这个

  

  但是现在我们要说的不是这个,而是这个:

  在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签,设置相应属性即可,如上代码,name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度(同理可以设置高度,也可指定具体值),initial-scale=1表示页面不缩放保持,mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小(实际就是不让缩放^^),user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕,还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi,后面的四个定性,第一个定量,即dpi_value是DPI值,device-dpi是使用设备原本的 dpi 作为目标 dp,不发生默认缩放,而后面的三个是指dpi取值在一定范围的表示。这里我们先介绍前文出现过的一个名词dpi,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。当达到人眼的极限分辨率时,乔帮主给它取了一个很高端的名字——Retina。那么目前市面的手机分辨率是怎样的一个分布呢,ios大家都知道的,从iphone4时代开始就已经是Retina屏了,至于Android可以看下此前Google官方公布的数据:

  

  从上面可以看出,高分屏和超分屏已经是主流了,具体的适配范围还是看各自的项目和定位吧。

  讲了这么多,有人可能会疑惑为什么这些都不是用在CSS中的?别急,慢慢来,现在就介绍如何在样式中运用,按照上述屏幕分辨率的四种划分,我们可以看到基本可以舍弃ldpi了。

  /* 中分辨率屏幕 */

  

  /*高分辨率屏幕*/

  

  /*超高分辨率屏幕(传说中的Retina屏)*/

  

  上面就是在css中的用法,把我们需要的css代码包含在大括号中就能用了,是不是很方便的样子%>_

发 表 评 论 相 关 信 息
姓名: 邮箱:
内容:
全部评论
共创国际项目管理顾问旗下网站:中国研发管理网 | 项目管理者联盟 | 中国工程管理网
Copyright © 2005-2014 ChinaRDM.COM 研发管理网 All rights reserved. 京ICP证060517号