什么是响应式设计？

不久前，设计师还真的不需要担心网站在手机和平​​板电脑上的外观。 手机还不能真正用于网络浏览，在 iPad 出现之前，平板电脑更多的是新奇事物而不是必需品。

显然，这一切都发生了变化，大多数技术专家预测，在未来几年内，移动浏览可能迟早会取代桌面浏览，成为浏览 Web 的主要方式。

随着屏幕尺寸和设备的不断发展，包括视频游戏机和互联网电视，旧的网页设计方式不再适合这项任务。 随着企业意识到需要为移动用户优化他们的在线体验，不适应的设计师将被抛在后面。

编者注：以下是对响应式设计的初学者介绍，不适合更有经验的网页设计师。

响应式设计的主要组成部分

这就是响应式网页设计的用武之地，内容和/或布局会自动适应查看它的屏幕大小。 最基本的，响应式设计的三个主要元素是灵活的网格、灵活的图像和媒体查询，后者是作为 CSS3 的一部分引入的。 稍后会详细介绍这些内容。

灵活的网格

灵活的网格基本上是主题和模板，其中设计元素以百分比而不是像素设置。 以百分比作为度量单位，这意味着设计为 50% 的元素将始终占据屏幕的一半，无论屏幕大小。

灵活的图像

在最基本的情况下，通过编写一条简单的规则来创建灵活的图像再简单不过了：

 img { max-width: 100%; }

本质上，这意味着如果一个元素大于其容器，规则会强制它匹配该容器的宽度。 而且由于现代浏览器会按比例调整图像大小，因此也保留了图像纵横比。 更重要的是，100% 规则也可用于几乎所有其他元素，例如嵌入式视频。

媒体查询

自从在 CSS 2.1 中引入媒体类型以来，样式表已经更加包容了移动设备和其他设备。 媒体类型本质上允许针对特定类别的 Web 设备进行样式设置，这些类型包括手持设备、屏幕设备和电视设备。 但由于设备之间几乎没有标准化，设备制造商的支持也很少，媒体类型从未发挥其潜力。

媒体查询不辜负这种潜力，然后是一些。 但不是像媒体类型那样关注设备的类型，媒体查询反而着眼于设备的功能。

一个简单的媒体查询可能如下所示：

查询的两个组成部分是媒体类型，设置为屏幕，然后是实际查询 - (max-device-width: 480px) - 本质上是询问设备的宽度是否为 480px 或更小。 如果是这种情况，设备会加载 generic.css。 如果不是，则链接将被忽略，其他链接也是如此，直到识别出正确的分辨率并加载了适当的样式表。

不仅仅是分辨率

但分辨率绝不是唯一可以通过使用媒体查询来控制的设计元素。 浏览器窗口的宽度和高度、横向和纵向，甚至布局，都是可以设置的其他一些参数。

例如，如果媒体查询检测到设备是智能手机，则可能会在计算机屏幕上加载显示三列和一个文本区域和两个垂直侧边栏的设计，可能会在智能手机屏幕上加载为全角文本区域，其中两个侧边栏作为下方的水平元素。

灵活的心态

当然，灵活设计的一个关键要求是具有灵活设计思维的设计师。 不幸的是，大多数网页在移动设备上仍然不是那么友好，主要是因为大多数设计师仍然通常只为桌面设计，然后才考虑智能手机和平板电脑。 很少有设计师考虑到多个平台的设计。

虽然将媒体查询合并到样式表中有一条学习曲线，但从使用像素设计到使用百分比设计的过渡让一些网页设计师望而却步。 但实际上，使用百分比进行设计并没有太大区别，而且也更容易。

例如，考虑将 100% 和 100 像素的宽度分配给两个相同的元素之间的差异。 一方面，您可以确保元素将填满屏幕，无论是台式机、笔记本电脑还是 iPhone 的屏幕。 但是 100 像素宽的元素在 480 像素的 iPhone 屏幕上会很大，但在分辨率为 1600×900 的桌面屏幕上却相对较小。

响应式设计意味着业务

对于企业来说，实施响应式设计的主要原因是显而易见的。 潜在客户越容易导航并找到他们正在寻找的内容，转化率就越高。 但对于许多设计师来说，商业网站的响应式设计通常意味着缩小内容的大小以适应更小的屏幕。 任何花时间滚动并放大和缩小以查找他们正在寻找的信息的人都知道，网站的微型版本不是答案。

企业和设计师处理移动设备设计问题的另一种方式是为不同设备创建一个单独的站点，并根据设备自动重定向。 这样可以提供最佳界面，并避免 JavaScript 和大图像导致的加载缓慢。

但是这种方法有几个缺点。 当然，其中之一是创建和维护多个站点以及跨这些站点协调内容的费用。 当然，当新设备问世时，还有另一个新站点要建立。 幸运的是，如果做得正确，响应式设计几乎可以解决移动设备设计中的所有问题。