自适应网页设计.pdfVIP

自适应网页设计（Responsive Web Design） 随着3G 的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能 在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600 像素以下；PC 的屏幕宽度，一般都在1000 像素以上（目前主流宽度是 1366×768），有的还达到了2000 像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一 件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile 版本，或者iPhone / iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal （入口）， 会大大增加架构设计的复杂度。 于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽 度，自动调整布局（layout）？ 一、”自适应网页设计”的概念 2010 年，Ethan Marcotte 提出了“ 自适应网页设计” （Responsive Web Design）这个名词，指可以自动识 别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300 像素，则6 张图 片并排在一行 如果屏幕宽度在600 像素到 1300 像素之间，则6 张图片分成两行。 如果屏幕宽度在400 像素到600 像素之间，则导航栏移到网页头部。 如果屏幕宽度在400 像素以下，则6 张图片分成三行。 mediaqueri.es 上面有更多这样的例子。 这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。 二、允许网页宽度自动调整 “ 自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport 元标签。 meta name=”viewport” content=”width=device-width, initial-scale=1″ / viewport 是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用 css3-mediaqueries.js。 !–[if lt IE 9] script src=”/svn/trunk/css3-mediaqueries.js”/script ![endif]– 三、不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条 非常重要。 具体说，CSS 代码不能指定像素宽度： width:xxx px; 只能指定百分比宽度： width: xx%; 或者 width:auto; 四、相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的代码指定，字体大小是页面默认大小的 100%，即16 像素。 h1 { font-size: 1.5em; } 然后，h1 的大小是默认大小的 1.5 倍，即24 像素（24/16=1.5）。 small { font-size: 0.875em; } small 元素的大小是默认大小的0.875 倍，即 14 像素（14/16=0.875）。 五、流动布局（fluid grid） “流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。 .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } float 的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向 overfl