一文读懂响应式网页设计元素

如果客户问：什么是响应式网站？建站公司的销售人员必定会这样回答——可以适应不同屏幕的网站，在手机、PC、平板上都能打开。
如果一个稍微专业的人士问：响应式网站中有哪些元素呢？未必能够回答上来。

响应式网站的特性

响应式网站是由一位研发人员EthanMarcotte提出的，他认为响应式网站应该具备三个特性：
一是具备灵活的网页布局；
二是具备灵活的图片适应；
三是具备灵活的媒体查询，或者说媒体条件。
下面，我们分别对这三个特性进行解读。

灵活的网页布局

网格这个术语在web设计中越来越模糊。说您的站点必须由一个灵活的网格组成，并不意味着您只能从十几个左右的大型网格系统中进行选择。为列、间距和网页定义自己的参数通常是web设计的最佳解决方案，并且可以像现有的任何系统一样灵活。
事实上，大多数现有的网格系统都限制使用CSS类来定义大小、空间和对齐方式。与编写自己的网格相比，尝试将这些限制叠加到响应性web设计上可能比较棘手，也更耗时。无论是在使用预先制作的网格系统还是创建自定义解决方案，灵活网格系统真正重要的方面在于布局大小和间距的机制。
对于网页设计师来说，这意味着放弃我们喜爱的像素，代之以使用百分比和em(相对度量单位)的网页布局。
当然，这并不意味着我们停止使用图像编辑软件中的像素(比如Photoshop、Fireworks等)。灵活的网格，可根据浏览器视图的大小更改布局。布局的变化可以通过流畅的动画表现出来。

灵活的图像

使用灵活的网格移动和缩放图像是响应式web设计的另一个关键特性。灵活的图像常常让web设计人员感到头痛。当我们想在更小的浏览设备上为文本内容提供更多的空间时，使用宽度和高度HTML属性来缩小图片的大小，加载巨大的、超大的图片，对于更快的web页面加载时间来说不是一个好的实践。
当然，这一问题的严重程度也取决于站点的图像质量。随着web设计的发展，我们不断地看到包含越来越少不必要的图片和库存照片的站点。也许这是一个很好的时间来评估您的web设计是否需要像现在这样注重图像。
另一种缩放图像的方法是用CSS裁剪它们。CSSoverflow属性使我们能够为适应新的显示环境而动态裁剪图像。
我们还可以在服务器上有多个版本的图像，然后根据用户代理使用服务器端或客户端特性检测和DOM操作动态地提供适当大小的版本。

媒体查询

媒体查询也被称之为媒体条件，指的是代码可以根据屏幕大小来改变呈现的方式。
通常，人们认为它们是响应性设计的核心组件，而让灵活的页面组件成为可选的。实际情况是，如果没有一个优良的HTML和CSS基础，媒体查询几乎毫无用处。
媒体查询允许设计人员使用相同的HTML文档构建多个布局，方法是根据用户特性(比如浏览器窗口的大小)选择性地提供样式表。其他参数包括方向(横向或纵向)、屏幕分辨率、颜色(即屏幕可以呈现多少颜色)，等等。
媒体查询并不是一种移动解决方案或平板电脑解决方案。相反，媒体查询和响应式设计让我们能够跳出屏幕大小或分辨率的限制，开始构建能够灵活适应所有不同屏幕的网站。