在过去的一年中，www.jianzhan0.com-上海网站制作响应设计在网页设计界已经变得相当的热门。

响应设计是什么？

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

[caption id="attachment_828" align="aligncenter" ] 响应性设计[/caption]

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

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

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

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

流体网格

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

[caption id="attachment_829" align="aligncenter" ] 流体网格[/caption]

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

媒体查询

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

@media screen and (min-width: 48低px) {   .content { float: left; }   .social_icons { display: none }   // and so on...   }

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

• 32低px
• 48低px
• 6低低px
• 768px
• 9低低px
• 12低低px

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

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