编辑导语：利用响应式网页设计创建网页布局，设计将能够更好地适配不同的屏幕和尺寸。那么，随着设计行业的不断更迭，未来响应式网页设计又可能会怎么发展？本篇文章里，作者就“响应式网页设计”的发展问题做了解答，一起来看一下。

文章插图
如果你和我一样一直在网页设计行业，你知道一件事即将发生，唯一不变的就是变化。大约每10年，我们做事的方式就会发生根本性的转变，这对于超越我们之前所做的事情至关重要……我们即将再次跨入下一个阶段。
一、它是如何开始的——固定屏幕在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640×480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。
毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。

文章插图
二、它现在怎么样——响应式设计随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起，我们需要适配多种移动端设备，这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。
十多年来，我们一直使用“响应式网页设计”（RWD）创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。
在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。
用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。
三、它的未来是什么——组件驱动很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时——就像我们在90年代所做的那样。
我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。
当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。
例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。
好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。
CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计”（RWD）以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。
让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。
四、用户能够设置基于个人偏好的“媒体查询”简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。
这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：

文章插图
这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。

稿源：(人人都是产品经理)

【傻大方】网址：http://www.shadafang.com/c/111E624352021.html

标题：页面|译文：开启新时代的响应式网页设计