随着智能手机、平板电脑的普及，用移动设备上网的人越来越多。为适应各种设备下的分辨率，对于网页设计师的要求越来越高。
在2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
现在的分辨率小至320px，大至2000px以上，这个范围变化很大。因此肯定不能用固定宽度的设计方案。那么要如何在各种不同的分辨率下呈现同样的页面呢？答案就是用HTML5+CSS3的Media Queries（媒体查询）相关技术各种设备的浏览器响应来进行网页的设计。由于老的浏览器不支持HTML5+CSS3，可以用html5.js和css3-mediaqueries.js来解决，特别是IE9以下的老浏览器。
Media Queries用法：
下面表示屏幕宽度小于400px(max-device-width: 400px)就加载400.css文件
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="400.css" />
下面表示屏幕宽度介于400px至600px时就加载400_600.css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="400_600.css" />
另外也可以用CSS中的@media规则达到同样的效果，如：
@media screen and (max-device-width: 400px)
{
css代码
}