利用响应式网页设计创建网页布局

无需加好友免费技术支持

编者按：利用响应式网页设计创建网页布局，设计将能够更好地适应不同的屏幕和尺寸。那么，随着设计行业的不断变化，响应式网页设计未来可能会如何发展呢？在本文中，作者回答了响应式网页设计的发展问题。让我们看看。

如果你和我一样在网页设计行业，你知道一件事即将发生，唯一不变的就是变化。大约每10年，我们做事的方式就会发生根本性的变化，这对超越我们以前所做的非常重要……我们即将进入下一阶段。

在千禧年到来之前，我们首先开始在单个视图屏幕上进行UI当时最流行的屏幕尺寸是640×480.大多数时候，我们甚至不考虑滚动屏幕，而是在特定区域或文本局部区块中设置内部滚动条。

毫无疑问，当时大多数网页也被使用Flash或HTML它是用来布局的表格创建的。在智能手机出现之前，随着事物的发展，我们经历了第一个从根本上改变到响应设计。我们走了很长一段路，CSS自2010年以来，响应式网页设计真正获得了专有工具。

随着CSS在3的发布中，我们获得了媒体查询（Media Queries）访问权限(译者注:随着移动互联网的兴起，我们需要适应各种移动设备，这需要使用Media Queries，即媒体查询)，之后不久，Ethan Marcotte响应设计一词在2009年底创造。

十多年来，我们一直使用响应式网页设计（RWD）创建网页布局，作为一种网页设计方法，只需要基于屏幕尺寸进行设计，响应使我们的设计能够适应各种设备和屏幕尺寸。

在早期，当移动电话不兼容媒体查询或JavaScript当时，移动优先和渐进式增强的概念已经成为一种非常流行的方法。当时有很多CSS完全不支持。

用我们今天的话来说，响应性设计，我们认为页面布局应该适应整个浏览器、屏幕大小和需要投射到整个布局上的限制。当需要从桌面调整到移动屏幕时，我们使用媒体查询来改变整个页面布局。

很快，使用这种响应式设计方法可能会被认为和使用表格的页面布局一样过时——就像我们在90年代所做的。

我们通过基于viewport(视角)媒体查询获得了很多强大的工具，但我们也缺乏很多适应的可能性，因为媒体查询是一个适合整个页面的通用解决方案，对每个用户来说都是一样的。我们缺乏响应用户需求的能力

当我们谈论组件时，它指的是页面上的元素，可以由其他元素组成。

例如，卡片、横划卡或推荐模块UI每个块都由各种较小的构建块组成。这些组件拼凑在一起形成我们的网页。我们可以用 global viewport information(全设置这些组件，他们仍然不能有自己的风格。当我们的设计系统是基于组件而不是页面时，它变得更加困难。

好消息是，生态系统正在发生变化，它正在迅速变化，这需要我们思考如何设计和定义组件样式以及如何适应周围环境。

CSS随着不断发展，响应网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入以来 响应式网页设计（RWD）仅仅10多年来，这个生态系统就准备好迎接它了CSS发生了相当大的变化。

让我们深入研究一下我们可以期待什么样的变化，如何改变我们的设计方法，如何考虑界面设计。

简单地说，我们可以期待新的基于偏好的媒体查询来帮助我们更好地响应用户。它们将使我们能够根据用户自己的特定偏好或需求设置网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但它可以给你一些基于偏好的想法：

这将帮助我们构建更具活力和个性化的网页体验，特别是那些希望网站易于访问的用户，以满足我们用户的独家需求。

此外，这些基于偏好的媒体查询尊重任何用户在操作系统中设置的偏好。

例如，当用户的操作系统偏好设置为降低动态效率时，他们可能不喜欢页面上超华丽的介绍、加载或飞行动画效果。我们应该首先尊重他们的偏好，并为他人提供提高动态效率的体验。

另一种流行的媒体查询是@prefers-color-scheme(配色偏好设置)允许我们根据用户的偏好和操作系统中的设置将我们的设计改为亮色模式或暗色模式。这并不取决于用户需要手动更改暗色模式

CSS 容器查询是最令人兴奋的新兴领域之一（container queries），它通常也被称为元素查询。从基于页面的响应设计到基于容器的响应设计的转变，发展设计系统的作用价值不容低估。虽然今天使用它并不安全，但了解它的发展方向很重要。

简而言之，容器查询允许我们根据父级容器而不是整个页面设置规则。这意味着任何组件都更加独立，与现代设计系统一致，真正成为即插即用模块，可以转移到任何页面或布局，不需要根据新环境重新考虑所有内容。

由于组件本身有其响应信息，容器查询为我们如何规划、设计和构建特定组件提供了更动态的方法。

甚至Ethan Marcotte我们也表达了为什么容器查询如此重要，我们应该研究它。

由于各种形态因素（form factors）我们需要媒体查询来考虑这些场景的变化和扩展，如新的屏幕类型和可折叠屏幕。在这里提到的所有内容中，请记住，这是最实验的，只是一项正在进行的工作。我们仍在努力解决我们可能遇到的任何复杂问题，并考虑未来身体因素的发展。

在可折叠屏幕场景中，原型中有一些媒体查询，可以让您定位屏幕跨度，以及我们如何根据新环境适应内容。例如，您可以在一个屏幕上放置一个封闭的侧栏（或菜单），允许内容在另一个屏幕上展开并与页面滚动。

我知道你在想什么。我们从事网页设计10多年，使用响应进行网页设计。我们对它很满意，那么为什么要改变呢？

如果我们真的从最终的角度来看响应设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每个个人用户高度相关的时代迈进。我们的网页体验应该适应用户的需求偏好。随着设计系统的发展和如何创建更便携的网页，如容器查询将变得非常有意义。

配图：CSS 将基于各个层级来确定用户的最佳体验

考虑到这一点，这意味着我们现在可以使用基于页面的媒体查询（包括跨屏幕的细微差异）来设计宏观布局；使用容器查询的组件来设计微观布局；使用基于用户偏好的媒体查询来定制用户体验。

对于新的响应设计，有许多新的概念正在被原型化和概念化——请参见下面的延伸阅读。

我们需要从根本上改变我们对设计和用户独特体验的看法。我们需要更好地适应这样一个事实：我们的设计不是静态的，不仅在布局上，而且在用户体验中，我们需要学会在这种模糊中制定计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解新响应体验的意义。

进一步了解

New media queries you need to know（LogRocket）Container Units should be pretty handy（CSS-Tricks）It’s time we say goodbye to pixel unitsSay Hello To CSS Container QueriesContainer Queries: a Quick Start Guide原作者：FrancoisBrill

作者：百度MEUX，百度移动生态用户体验设计中心负责百度移动生态系统用户/商业产品的全链接体验设计

本文由 @百度MEUX 每个人都是产品经理，未经许可不得转载

题图来自Unsplash，基于CC0协议