移动Web开发之响应式网页设计

作者: 来源: 更新时间:2012-12-12 11:04:18 点击:
什么是响应式网页设计?

Responsive Web Design 是 Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,根据终端屏幕的大小亦或类型而调整显示的布局与内容——而不是为每个终端做一个特定的版本。

下图列举了我们可能面对的不同的硬件设备类型、不同的操作系统、不同的屏幕分辨率:

 

 

应用响应式网页设计,可以使我们不必针对具体设备或屏幕编写单独的网页,不需另建单独的网址,一个页面适用于所有的设备,下图是一个例子,同一个网页在不同的设备中,我们看到不同的布局与内容的隐藏:

在PC中显示的网页:

到了屏幕小的移动设备上变成了这样,只有页面主题内容,不见了侧条和广告:

 

 

 如何实现?

需要综合运用三个方法步骤:

第一步,Media query - 即指定不同的 CSS 显示风格

第二步,Fluid grid-即在 CSS 中使用百分比%而不是绝对值,如像素px来修饰页面布局元素的尺寸如 Div。

第三步,Fluid images/media-同样使用百分比%而不是绝对值,来修饰图像、视频、字体的显示的使其能根据不同屏幕作出调整。

第一步首先要在页面中添加:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。

下面有两种方法让浏览器根据屏幕大小来选择不同的CSS样式

方法1:

在 css 文件中加 @media 标签,如

@media screen and (min-width:481px)

{

/* 宽度大于481时应用的样式 */

......

}

@media screen and (max-width:480px)

{

/* 宽度小于于480时应用的样式 */

......

}

其它共用的css属性放在外边。

方法2:

在页面<head> 部分指定不同的 css。 如:

<head>
<title></title>
<link href="test1.css" rel="stylesheet" type="text/css" />
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:768px)" type="text/css" />
</head>

当浏览器宽度小于768px时会使用mobile.css ,不然就用前一个。

说明

screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的W3C参考请看 http://www.w3.org/TR/css3-mediaqueries/#media1

第二步要注意百分比是相对于父容器来说的。

第三步,可以使用 

img, object {
max-width: 100%;
}

这样保证图像和媒体的尺寸不会超出屏幕。

字体方面可以使用em,1em = 100%。

另外还有一种方法  flex box, CSS3 的新方法,以后加以介绍。

 响应式网页设计的优缺点

优点:

工作量相对单独开发移动网站来说要小,不需要另外的域名,对于所有设备适用。

缺点:

占用带宽,对于 CPU 和资源都紧张的移动设备来讲,下载了许多不需要的图片等资源,图像没有针对小屏幕优化。

 

针对响应式网页设计的缺点,我们可以采用移动优先设计的方法和技术技巧来克服,下一篇会有介绍,同时带大家认识一些设计工具。

 

本文版权归原作者所有,转载必须注明出处:http://www.cnblogs.com/h5rocks/, 否则保留追究法律责任的权利。