HTML5移动Web开发

1. 响应式web设计

（1）.媒体查询初探   通过media属性为样式表指定了设备类型

<link rel="stylesheet" media="screen" href="style.css" />

CSS3  增加当设备纵向放置的时候才匹配的条件

<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />

CSS3  增加当设备屏幕大雨960px才会加载style.css样式文件的条件

<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />

 参考CSS3媒体查询：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前缀创建媒体查询的范围。

<metaname="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densitydpi=high-dpi]" />

在多数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官方公布的数据：

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

/* 中分辨率屏幕 */

@media (-webkit-min-device-pixel-ratio:1){css代码}

/*高分辨率屏幕*/

@media (-webkit-min-device-pixel-ratio:1.5){css代码}

/*超高分辨率屏幕（传说中的Retina屏）*/

@media (-webkit-min-device-pixel-ratio:2){css代码}

针对视口宽度不大于768像素的情况加载大括号中的样式

@media screen and (max-width:768){css代码}

资料来源：

http://sc.chinaz.com/info/130410113358.htm