上次花一天的时间写了一篇《Responsive设计的十个基本技巧》，在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧，其中涉及的面也非常的广，一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度，为了能帮助大家进一步的了解和学习Responsive，今天我为大家整理了一篇《Responsive Web Design》，这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

对于今天而言，大家常见的固定布局、自适应布局，都是一种反应迟钝的Web设计，并不一种优秀的Web设计。换过话来说，如果你不能接受内在适应性的Web页面（此处的内在适应性网页是指，你的Web页面能自动的适应各种设备的显屏，并且能够轻构的实现内容在不同设备的显示与否），你就不是一位优秀的Web设计师。那么此时大家会问？那么我们是不是真的有必要学好Responsive设计呢？如果让我来回答，那是肯定的。就当今的信息科技，我们制作出来的Web页面不在是仅停留在当初的PC设备上，而且随着移动端的高速发展，使用移动端设备访问Web页面的用户群体会越来越多，也就是说，当初制作的Web页面无法满足用户的需要了，这时在大家都需要一种设计，让你的Web页面能在各种设备显屏上都得到最好的渲染。如此一来,Web页面的未来就是Responsiv设计。

一、Responsive的优势

扯了这么多，很多人肯定会问？Responsive究竟有什么优势呢？根据我个人对Responsive设计的学习，我总结了一下（总结的不好之处希望大家多多指点）：

1. 一个Web页面能适应各种显屏；
2. 较大的缩短了开发者开发网站的周期；
3. 具有良好的SEO功能，易于google搜索；
4. 给用户更多的选择。

知道了Responsive设计的优势，你是否有一种想深入的冲动呢？如果你有的话，我建议你花点时间继续往下阅读，我想你会有所收获的。

二、Responsive的术语

在学习Responsive设计时，有几个术语大家很有必要先了解一下，因为这几个术语是Responsive设计中很关键的部分，了解他们，对于学习Responsiv设计会有很好的帮助。

1、流体网格(Fluid Grids)

流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是能让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

扩展阅读：

1. 30+ CSS Grid System
2. 8个实用的响应式设计框架
3. CSS布局——960gs
4. Design by grid
5. Rolling Your Own Grid Layouts on the Fly Without a Framework
6. Setting Type on the Web to a Baseline Grid
7. Fluid Grids
8. Contextual Fluid Grids
9. Adaptive CSS-Layouts: New Era In Fluid Layouts?
10. CSS Grids

2、弹性图片（Flexible Images）

弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情：

img {
  max-width:100%;
}

如果在reset.css样式中直接重置了的话，要非常小心，因为上面的样式会在IE8中存在一个严重的问题，让你的图片不会显示，所以最好在样式中为IE8浏览器重新设置过一个样式，以免造成图片不显示。

当然除了上述简单的方法之外，还可以使用一个相对复杂的方法，使用图片img的自定义的“data-”属性来实现图片在不同设备的显屏下的图片文件。

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

那么我们要样式中可以这样使用，以达到弹性图片的设置：

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

扩展阅读：

1. Adaptive images: solving the responsive image problem
2. Responsive Images Without JavaScript
3. How to style flexible images for RWD
4. Adaptive Images for Responsive Designs
5. Rundown of Handling Flexible Media
6. On Responsive Images
7. Responsive images: what's the problem, and how do we fix it?
8. Responsive Images: How they Almost Worked and What We Need
9. Responsive images without Javascript
10. Responsive Image Techniques & Resources

3、CSS3 Media Queries

Media早在CSS2中就有，但