响应性的Web设计

在过去的一年中，www.fantodo.com-深圳网站设计响应设计在网页设计界已经变得相当的热门。

响应设计是什么？

让我们得到正确的：不管你相信与否，www.fantodo.com这个网站，你正在读这篇文章其实是一个成功的响应设计！在桌面上的浏览器中打开这篇文章，慢慢的缩小浏览器，您应该看到的布局，奇迹般地自行调节，以适应新的浏览器的宽度更舒适，即使您的页面瘦得像一个手机的分辨率。比如下面的图片：

[captionalign="aligncenter"]响应性设计[/caption]

那么，什么是响应设计到底是什么？其实，问更好的问题可能是，响应性的Web设计解决了什么问题？你可能已经注意到了，电脑是不是先进可以用Web浏览器了。人们期望能够到自己的手机上浏览网页一样容易，因为他们在桌面计算机上浏览网页。因此，在响应的网页设计社区开始建立自己的网站的移动版本。现在回想起来，这是没有真正前进的方向，但在当时，这似乎是一个合理的想法。

科技从来没有停止前进，没多久后，手机硬件市场已被有效改变，其他形式因素的人气飙升。除了手机和个人电脑，触摸屏的设备，如平板电脑和小型笔记本电脑（上网本）开始处处可见。

总之，屏幕尺寸和分辨率不停地在变化，创建一个不同版本的网站，针对每个单独的设备是不是一个切实可行的途径。的响应性的Web设计解决了脑袋上。

在此之前，我曾提到响应性的Web设计不是一个单一的技术，而是技术和理念的集合。现在，我们有一个更好的主意，我们正在解决问题的空间，让我们来看看在每个解决方案的一部分。

流体网格

先进个响应设计的核心思想是什么被称为流体网格的使用。在较近的记忆中，建立一个“液态布局”，扩大与页面一直没有很受欢迎，因为创建固定宽度的布局，页面设计，是一个固定数量的像素跨越，然后在页面上居中。然而，当一个人认为在今天的市场中数量庞大的屏幕分辨率，液态布局的好处不容忽视。

[captionalign="aligncenter"]流体网格[/caption]

流体网格超越了传统的液态布局。设计布局的基于刚性像素或任意百分比值，而是一个精心设计的流体网格的比例。通过这种方式，当一个布局是一个微小的移动设备上的挤压或拉伸，在巨大的屏幕，在布局中的所有的元件将调整它们的宽度的大小，相对于彼此。

媒体查询

响应设计的第二部分是CSS3媒体查询，目前在许多现代的浏览器能够支持。如果你不熟悉的CSS3媒体查询时，基本上可以让您的网站的访问者中收集数据，并用它来有条件地应用CSS样式。我们的目的，我们主要感兴趣的较小宽度媒体功能，它使我们能够应用特定的CSS样式的浏览器窗口，如果低于某一特定的宽度，我们可以指定。如果我们想要一些造型手机，我们的媒体查询可能看起来如下所示。

@mediascreenand(min-width:48低px){   .content { float: left; }   .social_icons { display: none }   //andsoon...   }

使用一系列媒体这样的查询，我们可以工作的方式向更大的分辨率。我建议目标的像素宽度的组如下：

32低px

48低px

6低低px

768px

9低低px

12低低px

同样，这些都只是建议，应作为一个出发点。在一个理想的世界里，你会调整你的布局有效匹配每一个设备的宽度，

一个负责任的响应设计，只需在桌面上的浏览器打开这篇文章，慢慢地调整浏览器的大小，使其变小。您应该看到所有的页面元素自动地调整自己以适应新的宽度，做到这步，才是成功的相应设计。