针对不同的屏幕加载样式表

<link href="extra-small.css" rel="stylesheet" media="screen and (max-width: 390px)" />
<link href="small.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)" />
<link href="medium.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 767px)" />
<link href="large.css" rel="stylesheet" media="screen and (min-width: 768px)" />

即针对每种不同的屏幕，选择不同的样式表

在Responsive布局中，可以毫无保留的丢弃：

第一， 尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？

第一，使用HTML5 Doctype和相关指南；

第二，重置好你的样式（reset.css）；

第三，一个简单的有语义的核心布局；

第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。

说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。