什么是自适应网站建设（Responsive Web Design）？

随着移动互联网的强势发展，越来越多的人使用手机或便携式移动终端上网。移动设备已成为人们上网的最新趋势，正在超过 PC，成为访问互联网最常见的终端。网页设计师由此面临一个难题：如何在尺寸各异的设备上呈现同样的网页？

手机屏幕小、PC 屏幕大，同样的内容要在大小迥异的屏幕上都呈现出满意的效果并不容易。很多网站为不同设备提供不同版本的网页，但维护成本高，也增加了架构的复杂度。能否做到"一次设计，普遍适用"，让同一个网页自动适应不同屏幕呢？

"自适应网页设计"的概念

2010 年，Ethan Marcotte 提出了"自适应网页设计"（Responsive Web Design）的概念与方案，并制作了范例演示：

屏幕宽度大于 1300 像素：6 张图片并排一行；
屏幕宽度 600–1300 像素：6 张图片分成两行；
屏幕宽度 400–600 像素：导航栏移到网页头部；
屏幕宽度小于 400 像素：6 张图片分成三行。

自适应网站的实施方法

选择性加载 CSS

"自适应网页设计"的核心，是自动探测屏幕宽度并加载相应的 CSS 文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />

根据不同的页面宽度加载不同的 CSS 样式。上面这行代码表示：当屏幕宽度小于 400 像素时，加载 tinyScreen.css 文件。也可以借助 jQuery 等 JavaScript 技术来加载不同的 CSS 样式。

图片、div、table 等元素的自适应

除了布局和文本，还需要让图片和其他元素自动缩放：

img { max-width: 100%; }

对于 IE6–7 等不支持 max-width 的浏览器：

img { width: 100%; }

在 Windows 平台缩放图片时可能出现失真，可以使用 IE 专有命令：

img { -ms-interpolation-mode: bicubic; }

或使用 Ethan Marcotte 的 imgSizer.js。

本硕科技在自适应网站建设上经验丰富，能兼容主流的手机、平板与电脑设备，也能兼容 IE6–8 等低版本浏览器。