Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Element Queries(元素查询)︰ 响应式网页设计的未来

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Saber Zou (you can also view the original English article)

Media queries (媒体查询) 是现代网页设计的重要技术,但它不是完美的。 在这篇文章当中,我和大家一起探讨一下 ”element queries” (“元素查询”)这个概念,很多人认为这是响应式网页设计的未来。

开篇语

Ethan写的关于响应式网页设计的文章彻底改变了我们开发网站的方式。 他的文章很有启发性,也迅速被网页设计人员和开发人员采用。 由此不断涌现出了一些具体的开发方法,例如"移动优先"、"桌面端优先"和"设备不可知性(Device Agnostic)",还出现了新的设计模式,并引入了新的标准如<picture>标签,现在,有数不清的框架可供选择,使开发响应式网站变得更加容易。

我们不再为特定的屏幕大小,浏览器或者设备去开发网站了。 我们现在所做的是让网站在任何设备上,任何屏幕尺寸下的体验都同样令人愉悦。 实现的方式是使用"media queries"("媒体查询“)— — 并且配合view port meta 标签使用。

Media Queries (媒体查询 )

Media queries(媒体查询)旨在让我们针对特定的环境设置样式规则。 Media queries 的最常见用法之一是样式随着 viewport(视区)的宽度范围变化而改变。 比如说下面的代码,当访问该页面的视区宽度达到 720px 的时候,侧边栏就会隐藏。

Media queries 也随着设备而进化,添加了新的功能,如orientation (方向)和 resolution (分辨率)。 下面的示例演示了上述功能之一,如何为一个高分辨率的屏幕提供更大尺寸的图片。

在做一个响应式的体验中,media queries 已成为最基本和必需的组件了。 如果你还不了解,就通过阅读下面这些从 Tuts+ 的以及网络其他地方的收集来的文章、 教程和技巧,学习一下如何利用好媒体查询吧。

然而

在响应式设计中,Media queries(媒体查询)不是应对各种情况的灵丹妙药,事实上,它的目的也不是包治百病。

今天,市场上有各种尺寸和特色的设备,"移动"和"桌面"(我看着你呢"混合笔记本") 之间的界限范围不断模糊。 为此,保持一个网站的美感,还要有好的用户体验和性能,变得越来越不容易了。

谷歌 IO 2015 上,谷歌允许开发人员在超过 100 种不同的设备上检查他们的网站的兼容性。

一旦你把广告、 表单和旧有的内容等等添加进去以后,情况可能更糟, 很快你就会碰到 media queries "不太好"的方面。

Media Queries︰"不太好的地方"

考虑这样一个例子, 我们采用一个 UI 组件来显示我们团队成员的资料, 并且想要在网站上的其他几个不同的地方也使用同样的组件。 此示例演示了 UI 是放在宽度为 780px 的视区内是怎样的。

在"用户资料"页中,我们把用户头像放在左边,用户名称以及履历放在右边。

"用户"页面中的用户资料布局。

然而,在网站上的"团队"页中,布局要变化一下;用户头像现在放在顶部,用户名称和履历是放在下面的。 字体也可能要变小一点。

在"团队"页中的用户资料布局。

这种情况可以使用 media queries。 例如,我们可以这样编写 CSS︰

它是可以解决的,只要我们使用一些额外识别的类︰.user-profile.user-profile-card

然而,这样就违背了我们的 UI 是一个可重用的组件这一原则;这个 UI 应该可以放置在网站上的任何地方,并能够适应其周围的环境。

在此示例中,我们希望这个组件的布局能够被一个小的 container(容器)包裹的时候能够自适应,而不是被浏览器视区挤压的时候。 那么与其依赖浏览器视区的大小改变布局,为什么我们不在元素级别这样做呢?

Element (Container) Queries 元素 (容器) 查询

Elelment queries(元素查询)的想法最早出现在 2012 年;比响应式 Web 设计成为主流晚几年。 可惜当时并没有很多令人信服的理由让这个想法成为一个web 标准,那时网络世界仍然在重新适应挤压的变化。

Web 社区开始提出他们自己的倡议。 RICG(Responsive Issue Community Group),就是首先提出了 <picture> 元素的组织,已经把 element queries(元素查询)添加到其问题列表中,其他开发人员也开发了一个 JavaScript 库,像 EQCSS,来效仿此功能。

Element quesries 工作原理和 media queries 类似;不同的是前者监听的是元素的大小而不是浏览器视窗的大小。 这使我们能够建立一个真正的模块化的 UI 系统,并具有更 DRY 代码基础(code base)。 用相同的示例,我们可以通过 EQCSS 来重写 UI 组件的样式,如下所示︰

这样我们不需要在乎视区宽度是多少, 从上面可以看,只要 UI 被拉伸到 480px 或更宽,.avatar.bio会并排显示。 当 UI 宽度低于 480px 的时候,我们让.avatar.bio 堆叠起来并让内容中心对齐。

总结

需要说明的是,我不是说采用 media queries 就不好,完全没有这个意思。 Media queries 非常好用,如今许多网站都足以证明这一点。 Media queries 和 element queries 肯定是可以共存的。 但是确实有很多的设计场景使用 element queries 会比使用 media queries 更适合。

可惜 element queries 要成为 web 标准仍有很长的路要走;这个希望就要拜托 RICG 工作的小伙伴们了。

在这个等待的过程中,我们可以通过像 EQCSS 这样的 JavaScript 库来探索一下 element queries 的潜力。 而这正是我们在接下来的教程中要去做的。 敬请关注 !

进一步阅读

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.