响应式 Web 设计的三 R
4.53/5 (3投票s)
响应式 Web 设计的三 R
引言
如今的网站不仅服务于传统的桌面显示器，还服务于电视以及平板电脑和智能手机等手持移动设备。尽管屏幕尺寸千差万别，但消费者们无论何时何地，都在不断地连接和切换设备，他们期望在这些设备上获得相同程度的可用性。因此，对于企业而言，构建一个能够为所有屏幕提供始终如一的卓越用户体验的多屏网站既是当务之急，也充满挑战。对于多屏市场中增长最快的设备——智能手机而言尤其如此，因为其屏幕空间非常宝贵。
网站如何才能适应如此巨大的屏幕范围，并跟上未来新屏幕的出现？答案在于响应式网页设计。在本文中，我将介绍负责任网页设计的三个关键方法。它们是 Retile（重新布局）、Replace（替换）和 Resize（调整大小），我恰当地将其称为“响应式网页设计的“三R””。首先，让我们了解新多屏世界的现实和挑战。
面对现实
在2012年谷歌关于“驾驭新多屏世界：洞察消费者如何一起使用不同设备”的研究中，揭示了大多数人使用多个设备进行在线活动，如图1的信息图所示。
图1：客户媒体行为（来源：Google）
搜索排名提升
2015年4月21日，谷歌推出了移动友好更新，提升了移动友好网页的搜索排名（图2）。有关移动友好更新的更多信息，请参阅谷歌的常见问题。
图2：谷歌提升移动友好网站的搜索排名
紧随谷歌之后，必应于2015年5月14日宣布他们将在不久的将来推出自己的移动友好排名版本。
多屏友好选项
考虑到新多屏世界中的消费者媒体行为以及有利于移动友好的搜索排名，网站现在必须在所有屏幕上（从电视到桌面电脑，再到笔记本电脑、平板电脑和智能手机）随时满足消费者的需求。无论消费者碰巧使用哪种屏幕，他们都希望网站能够立即正常运行。对于智能手机和平板电脑尤其如此，消费者期望从更大的屏幕上获得相同的内容和用户体验，而无需不必要的手势，如捏合和滑动。
有三种基本方法可以采用，以实现多屏友好的网站：单独的URL、动态提供和响应式网页设计。
单独的URL
每个URL都托管一组不同的网页，这些网页针对指定范围的屏幕尺寸进行了优化。在此方法中，网络服务器检测用户正在使用的设备类型，并将请求重定向到托管专门为该设备设计的网页的URL。
动态提供
一个单一的URL托管多组网页，每组网页都针对指定范围的屏幕尺寸进行了优化。在此方法中，网络服务器检测用户正在使用的设备类型，并提供专门为该设备设计的网页。
响应式 Web 设计
一个单一的URL，提供一套通用的网页，这些网页能够根据屏幕尺寸和方向的变化即时进行不同的渲染。通过响应式网页设计，每个网页都能够自动动态地检测其查看设备的尺寸和方向，并在此基础上，即时采用最优化视图以适应该查看设备。
“单独的URL”和“动态提供”这两种方法都资源密集且成本高昂，因为它们必须为相同内容创建并维护多个代码库。此外，随着新设备的出现，长期来看，调整现有代码或开发新代码以适应新设备变得不可避免。换句话说，它们不具备面向未来的能力。
另一方面，响应式网页设计只需要一个URL、一个代码库，并且所有的动态检测和响应式渲染都只在客户端（即浏览器）进行，因此它无疑是实现多屏友好网站的最优方法。此外，它也具有面向未来的能力。
响应式 Web 设计的三 R
在多种屏幕尺寸下放置相同的HTML代码是可行的，但并非无需更改其在不同屏幕尺寸下的视图。一个在桌面电脑屏幕上奢侈地横跨多列的网页（图3）将无法很好地适应智能手机的屏幕（图4）。
图3：桌面电脑上的视图
图4：智能手机上的相同视图
因此，有必要基于相同的内容，设计针对智能手机、平板电脑、桌面电脑和更大桌面电脑屏幕分别优化的不同视图。在这方面，我确定了设计负责任网页的三个关键方法。它们是 Retile、Replace 和 Resize，我恰当地将其称为“响应式网页设计的“三R””。让我们逐一介绍它们……
重新布局 (Retile)
在桌面电脑等大屏幕上，有足够的宽度可以并排放置多个内容区（图3）。然而，在平板电脑和智能手机等小屏幕上，为了保持网页的可读性和可用性，通常会将这些内容区垂直堆叠（图5）。换句话说，您必须重新定位，即进行重新布局，您的网页的某些部分，以优化不同屏幕尺寸的视图。
图5：平板电脑的重新布局视图
替换
在桌面电脑等大屏幕上，导航栏通常水平显示在屏幕上（图6）。然而，在平板电脑和智能手机等小屏幕上，通常会用一个图标来替换它们，该图标可以垂直切换导航栏的显示（图7和图8）。
图6：桌面电脑的水平导航栏
图7：智能手机上替代导航栏的图标
图8：点击图标后垂直展开的导航栏
调整大小
不难想象，标题和图片等大型元素的尺寸需要改变，以便它们能够适应不同的屏幕尺寸并看起来合适。例如，在桌面电脑屏幕上看起来正常的尺寸，在智能手机屏幕上就会出现问题，如下图9所示
图9：智能手机上过大的元素
毫无疑问，您需要调整这些元素的大小，以优化智能手机的视图，如图10所示。
图10：智能手机上最佳调整大小的元素
媒体查询
要将响应式网页设计的“三R”编码化，您需要在需要进行更改的各个断点处使用CSS的媒体查询。媒体查询是CSS3中引入的一项强大CSS功能。它能够根据媒体类型、视口大小、分辨率和方向等条件，在各种设备上以最佳方式呈现相同的HTML内容。
媒体查询由媒体类型（例如屏幕和打印）和零个或多个媒体特性（例如宽度和高度）组成。媒体查询的媒体类型和媒体特性构成了表达式，该表达式根据其包含的媒体解析为真或假。请查看下面的一些媒体查询示例
@media screen {
div {
display: none
}
}
@media screen and (max-width: 768px) {
div {
display: block
}
}
@media screen and (min-width: 992px) {
div {
display: inline
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
div {
display: inline-block
}
}
CSS媒体查询的编程能力，结合响应式网页设计“三R”的创造性和创新性应用，将使您能够将相同的HTML内容呈现在任何屏幕特征的设备上。
摘要
在本文中，您了解了多屏友好网站的需求和原理。您了解到，CSS的媒体查询的编程能力，结合响应式网页设计“三R”的创造性和创新性应用，是构建多屏友好网站的关键。