响应式设计

今天用jquery mobile 写了一个例子 但是在手机无论如何都不能显示。都是缩放的。

百度了下。知道少加了i一个meta属性

<meta name="viewport" content="width=device-width" />

1.媒体查询

下面列了一部分供大家参考(参考自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标签,此前我们常用的应该是这个
<meta name="viewport" content="width=device-width" />

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

文章转自:http://sc.chinaz.com/info/130410113358.htm#

posted @ 2014-11-22 10:06  闲云-野鹤  阅读(144)  评论(0编辑  收藏  举报