响应网页设计无疑是目前网页设计的热门话题。在某种程度上，流行的概念响应网页设计这是实至名归的，因为网站用户访问网站的方式越来越多样化。iPad，iPhone， Android移动设备，台式电脑，上网本——我们处在一个网页设计必须以多种方式运作的时代。
让我们来探索其中的意义和响应式网页设计背后的原则。
响应式网页设计的关键特征
为了让一个网页设计被认为是“响应性的”，它需要有三个关键特征。网页设计/开发人员伊桑马克特-将响应式网页设计概念化的作者-将这些特征描述为:
- 网站必须建立一个灵活的网格基础。
- 与设计相结合的图像本身必须灵活。
- 不同的视图必须在不同的上下文中通过媒体查询．
css技巧根据浏览器视窗的大小改变它的网页布局。需要注意的是，为了实现一个真正的响应式网页设计，这三个特性都需要实现。任何缺乏这些特性的设计都不是响应式的网页设计。
这是老生常谈了。接下来，让我们深入研究这三个特性，以便更好地理解它们是如何一起工作的，从而为我们带来一个完全响应和有效的web设计．
灵活的网格
这个词网格因为它与网页设计的关系越来越模糊。说您的站点必须包含灵活的网格并不意味着您只能从中进行选择世界上最伟大的网格系统之一。为列、间距和容器定义自己的参数通常是网页设计的最佳解决方案，可以像任何现有的系统一样灵活。
事实上，大多数现有的网格系统都限制地使用CSS类来定义大小、空间和对齐方式。试图将这些限制叠加到响应式网页设计中可能是棘手的，而且比编写自己的网格。无论你是使用预制的网格系统还是创建一个定制的解决方案，一个灵活的网格系统真正重要的方面是你的布局大小和间距的机制。
对于网页设计师来说，这意味着抛弃我们钟爱的像素，用网络布局使用百分比和em，这是相对的度量单位。当然，这并不意味着我们不再使用图像编辑软件(如Photoshop、Fireworks等)中的像素。
相反，添加了一个涉及到一点(完全基础的)数学的步骤成为网页设计过程当我们将像素转换成使用相对单位测量的网页布局时。
圣保罗的学校网站是在一个灵活的网格上，根据浏览器的窗口大小改变布局。布局上的变化会通过平滑的动画显示出来。
灵活的图像
响应式网页设计的另一个关键特点是，图像可以随着灵活的网格移动和缩放。灵活的图片常常让网页设计师头疼。加载我们按比例缩小的巨大的超大图片宽度而且高度当我们想在较小的浏览设备上为文本内容提供更多空间时，HTML属性并不是一个好的实践更快的网页加载时间．
当然，这个问题有多严重还取决于你的网站图片的份量。作为网页设计的发展在美国，我们经常看到一些网站添加的不必要的图片越来越少股票的照片．也许这是一个评估你的网页设计是否需要像现在这样大量使用图片的好时机。
一种替代缩放图像的方法是使用CSS裁剪它们。CSS溢出属性(如。隐藏溢出:)使我们能够在图像周围的容器移动以适应新的显示环境时动态裁剪图像。
我们还可以在服务器上有多个版本的图像，然后根据用户代理使用服务器端或客户端特征检测和DOM操作动态地提供大小适当的版本。最后，如果我们真的想把重点放在非图像内容上，我们可以选择完全隐藏图像，使用样式表提供的媒体查询来设置显示:没有属性用于图像(或通过将可选图像分配为类似的类来指定图像的子集optional-img以允许样式表中更大的CSS选择器特异性)。
Think Vitamin上的形象元素是灵活的;它们的大小取决于浏览器视口的大小。
媒体查询
媒体查询可以说是响应式网页设计中最令人兴奋(也最让不熟悉它的网页设计师感到害怕)的功能。通常，人们对媒体查询过于着迷，认为它们是响应式设计的核心组件，而对灵活的页面组件却是可选的。现实的情况是，如果没有现有的坚如磐石的HTML和CSS基础(不仅包括灵活的网格，还包括灵活的图像)实现，媒体查询几乎没有用处。
媒体查询允许设计人员使用相同的HTML文档构建多个布局，方法是根据用户代理的特性(比如浏览器窗口的大小)有选择地为样式表提供服务。其他参数包括方向(横向或纵向)、屏幕分辨率、颜色(即屏幕可以呈现多少颜色)等。
下面是一个媒体查询的例子，它服务于一个依赖于视口宽度的样式表:
< link rel = "样式表"媒体= " (max-device-width: 320 px) "Href ="mobile.css" /> 媒体= " (min-width: 1600 px) "href = " widescreen.css " / >
媒体查询并不是专门针对移动解决方案或平板电脑解决方案(尽管它们通常与它们联系在一起)。相反，媒体查询和响应式设计允许我们跳出屏幕尺寸或分辨率的限制，开始创建灵活适应(从理论上讲)所有不同的媒介。
用户体验伦敦使用元视窗设置比例和布局宽度。
响应式网页设计到底是什么
当我们回顾响应式网页设计的三个特点时，真的没有什么值得兴奋的。事实上，构成响应式网页设计的90%都很简单好的网页从设计开始。格式良好的HTML和灵活的布局应该成为现代网页设计师日常摘要的一部分。
Marcotte通过倡导响应式网页设计所做的只是向我们展示了一种新的方法来实现我们本来就应该做的良好设计实践。在现代环境下，考虑到现在对灵活布局的需求甚至更加迫切，以便我们能够更好地适应当前存在的更广泛的浏览情况，我们需要流动和灵活的设计。响应式网页设计迫使我们花时间做正确的事情，不仅在我们如何编码，但我们如何构思新想法和执行新的设计。
8面临杂志具有灵活的网页布局。
我们还没有到那一步
任何花时间处理灵活的内容和媒体查询的人都会意识到，这仍然不是构建满足每个用户代理的网站的最终解决方案。通过不同设备浏览网页的用户通常有不同的需求，这取决于他们使用的设备。移动web浏览器上的用户最有可能对尽可能快地访问核心信息感兴趣。
对于餐馆来说，这可能意味着菜单、用于预订的电话号码、实际地址等等。对于这种情况，加载整个站点然后隐藏其中的90%显然不是一个理想的解决方案。
正确的方向
响应式网页设计是朝着正确方向迈出的一步。很多网站都从响应式设计中获益良多，每个设计师都应该有能力执行这种解决方案并寻找优化他们设计的方法。当设计师继续在解决方案上取得进展，以使我们的设计在每种设备和情况下都能得到预期的体验时，反过来，设备应该努力以最理想和最直观的方式显示Web。
随着双方走向彼此，我们将不可避免地拥有越来越多的机会来构建一个更有活力、更吸引人、更美丽的网络。和那是值得兴奋的事情。
相关内容
- 6种流行的内容表示设计模式
- 线框图设计的好处
- 网站线框图的终极指南
- 相关类别：网页设计而且用户界面
