Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上，他将是一个最受欢迎的网页设计概念，因为随着网站用户日渐多样化的访问方法，比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览，这也给我们今后的网页设计工作提出一个新的概念——Responsive设计

Responsive网页设计的主要特点

- 该网站必须建立灵活的网格基础

- 引用到网站的图片必须是可伸缩的

- 不同的显示风格，需要在media queries上写不同的样式

1. 灵活的网格系统

网页的网格系统应用，他在网页设计中的概念越来越模糊。换句话说，你的网站必须包括一个灵活的网格系统，并不意味你的网站需要使用一个庞大的网格系统，比如说960s。所以在你的网页设计中定义一个你自己需要的列、列间距等参数，才是一个网页设计的最佳解决方案，自己定义的和现有的任何一个系统同样是灵活可变的

事实上，大多数现有的网格系统限制了我们自定义列的大小，和间距，换回来说，使用现有的网格系统，我们需要遵循他的使用模板原则才能生效，但这样一来往往对我们的使用有太多的限制，然而自己动手一个网格系统，又是一件棘手的事，而且也是一件费时的事。所以说，无论我们使用现有的网格还是自己自定义的网格系统，最主要的是要让他适合我们布局的大小和间距的需要

这样就意味着，我们需要放弃常用的“px”固定布局，而使用百分比或者“em”这样的流体布局来实现“web布局”。当然这样并不是说我们在设计软件中不能使用“px”，我们在设计页面的图片效果时，还是在“px”的基础上实现，因为我们只是在Web页面中使用一个相对单位来实现需要的网页布局。这样说或许有点模糊。我们可以换过来说“设计web页面的模型效果，我们还是使用“px”来定其大小与间距，只是在图片效果转成web页面效果时，才采用“百分比”或用“em”这样的相对单位来替代“px”，从而实现一种比较灵活的布局。”具体他们之间的区别，大家不妨移步到Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?查看他们之间的区别所在

2. 灵活的图片

这里所说的灵活的图片指是的图片的可收缩性，这一点也是Responsive设计中的另一个关键点。灵活的图像常常给网页设计师有点头痛，有点烦。因为载入是超大的图像时，我们在缩小显屏大小时，这些超大的图像就会破坏我们的布局。为了让更小的显屏和其小移动设备能显示更多的文本内容，我们需要缩小这些超大的图片，最早使用的是就是通地改变图片的width和height属性来实现。这样一来对于网页载入并不是一个很好的做法。这也将严重的影响你的网站形象。还好，随着网页设计的向前发展，我们看到网站上越来越少使用那些不必要的图片，但是目前，我们还是需要考虑如实来处理这样的一个问题，让这个超大图片在你的Responsive设计中并不会给你带来麻烦

就是使用CSS来控制，使用CSS中的“overflow:hidden”将超出的图片部分进行剪切，随着他的容器转变，以达到新的显示效果

其实这种方法也不是最佳的解决方法，我们曾在《Responsive设计和CSS3 Media Queries的结合》中也探讨了如何实现图片的可伸缩性

3. Media Queries

Media Queries是CSS3之中的一个新增属性，也是Responsive设计中令人最兴奋的一个功能

通常情况下，我们有一个老的思路，就是我们的网站只能一个适合的样式，如果你想动态的改变样式，就需要借助其他的语言来帮忙，但这个Media Queries出现，可以让我们使用相同的HTML结构，创建多个布局，并且还可以实现多个不同的页面效果，从而使用网站适合各个不同显屏的浏览器浏览

大家需要注意一点Media Queries不是专门的解决移动设备和平板设备的布局。相反，Media Queries和Responsive的配合，能让我们觉得我们的设计能适应不同的屏幕大小显示。有关于这方面的实例介绍，大家感兴趣的话可以点阅——《Responsive设计和CSS3 Media Queries的结合》

从Responsive设计中三个特点来看，确实让人兴奋不起来，可是事实上，这将是一个良好的设计开始。良好的THML结构和一个灵活多变的布局，难道不让你觉得特别的新吗。在这样的一个日新月异的技术变化的大背景之下，需要灵活的布局更是势在必行。现在，让我们可以更好的适应更多的显屏 浏览的情况下，我们需要的是流体的，灵活的一种设计。Responsive设计迫使我们采取行动开始做这样的事情