莹晨网站设计
为北京传诚信旗下的网站建设高端品牌,专注于HTML5自适应网站建设及网站设计。

京ICP备05019839号
京公网安备 11010502031691号


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

 响应式网站设计

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

响应式网站设计并非新的技术,只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起,并命了这个听起来很牛X的名字——响应式网站设计。犹如当年的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代码包含在大括号中就能用了,是不是很方便的样子%>_<%。当然我们还可以用到之前提供的几个特性,如下:

针对视口宽度不大于768像素的情况加载大括号中的样式。
虽然我们可以把设备的分辨率可以分为这几类,但是屏幕的尺寸实在太多,如果针对每一种尺寸写一种样式,我觉得设计师和前端面不用干别的了,因为开发成本实在太大,而且没有必要,我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整,减少开发成本。

转载本文章请关注!网站建设选择北京莹晨设计www.itccx.com,

 
QQ咨询 点我
咨询热线
400-697-8610
咨询热线
010-62199213