针对大型显示器的优化

Avatar of Jon Yablonski
Jon Yablonski

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 的免费信用额度!

以下是 Jon Yablonski 的客座文章。Jon 告诉我,他最近参与了一个项目,该项目非常重视**巨型**屏幕。Jon 将向我们展示,就像任何类型的 RWD 工作一样,它需要规划。额外的媒体查询对于定位巨大显示器很有用,排版可以助你走得更远。

随着超高清显示器和能够通过智能电视浏览网络的设备的兴起,互联网越来越多的被访问和观看在比传统桌面显示器大得多的屏幕上。大多数网站在这方面都没有达到优化标准。但是,如果您正在构建响应式网站,那么您可能已经拥有了调整内容比例所需的工具。在这篇文章中,我们将探讨在大型显示器上优化网站的挑战和技术。

识别大型显示器

首先,让我们确定什么构成大型显示器。根据 W3Counter,设备宽度为 1366×768 像素的屏幕是最常见的大型设备分辨率。下一个常见的大型分辨率是 1920×1080 像素。这些值主要来自台式机显示器,大多数网站无需太多调整即可适应这些屏幕。

向上移动到更高分辨率,下一个最常见的设备宽度为 2560 像素。此宽度是您在大多数高清台式机显示器上可以找到的,这些显示器从 27 英寸开始。这也是大多数网站开始出现问题,因为屏幕上的空间过大。

一些流行网站的小样本,每个样本都以 2560×1600 像素的屏幕尺寸捕获

以上图片显示了一些流行网站的小样本,这些网站都以 2560×1600 像素的屏幕尺寸捕获。正如您所见,这些网站都没有针对此比例进行优化:文本太小,在一个相对较小的空间中塞入大量内容,让眼睛难以聚焦,而且所有内容都被周围的空白区域所掩盖。这些因素都会降低可读性,导致用户体验不佳。

那么,是什么阻止设计师和开发人员针对大型显示器进行优化呢?答案肯定因团队而异,但确实存在一些技术挑战。让我们来找出这些挑战是什么。

大型显示器的挑战

针对大型显示器进行优化的挑战集中在如何缩放和管理内容上。将这些挑战细分为类别,它们看起来是这样的

内容编排

内容编排是指如何根据屏幕尺寸调整内容,在任何宽度下提供最佳的体验。屏幕越大,内容比例越不协调。这会导致一些问题:1)由此产生的笨拙空间分散注意力,2)过多的空间会掩盖内容,使内容看起来比实际更小,以及 3)可读性很可能会因此变得太小而降低。

一般来说,内容在小屏幕上的调整方式相当简单:我们将内容堆叠在一个列中,并在必要时调整视觉顺序。另一方面,我们在大屏幕上处理这个问题的方法差异很大,具体取决于内容和可用空间。如果您避免将内容调整为大型显示器上提供的额外空间,您的内容很可能看起来比周围的空白区域小。但是,如果您试图通过引入更多列来用内容填充空间,您可能会通过在屏幕的相对区域内呈现过多内容来在视觉上压倒用户。

图像

图像在大型显示器上带来了许多独特的挑战。由于大多数大型屏幕也是更高分辨率的,我们必须管理每个图像的额外变体,以确保提供适当的图像。此外,我们还必须管理图像在布局中的行为方式。与其他元素不随屏幕缩放的图像会导致它们之间出现不协调的空间间隙。相反,缩放过大的图像可能会抢占其他元素,显得过于突出。由于图像带来的挑战没有一劳永逸的解决方案,因此您必须根据内容的独特需求仔细考虑如何管理它们。

优化技术

现在我们已经确定了大型显示器带来的各种挑战,让我们来看看一些针对此比例优化内容的方法。

我创建了一个网站来演示我们将要探讨的针对大型显示器进行优化的每项技术。考虑到主题,我选择了一个在可扩展性方面看起来很合适的主题,即死亡之星 II。我将引用来自此演示的一些代码,但您可以在这里的 CodePen 上看到完整的演示 查看演示。

死亡之星 II 演示在 CodePen 上的屏幕截图

您用于针对大型显示器优化内容的方法将有所不同,具体取决于您的内容。一种选择是简单地调整布局,以便以一种利用额外屏幕空间的方式呈现内容。另一种方法是响应式地放大内容,使其按比例适应空间。当然,您也可以同时使用这两种方法。在我们的演示中,我们将响应式地放大内容,以便为大型显示器上的用户提供更好的体验。

提前规划

针对大型显示器进行优化的第一步是为它们规划。通过提前规划,您可以在深入之前最大程度地减少意外情况,并确保所有内容协同工作。如果您的设计流程涉及使用设计应用程序来可视化内容的行为方式,那么通过创建代表超大型屏幕的画布尺寸以及代表更传统屏幕尺寸的其他合成图来实现这一点。如果您更喜欢在浏览器中进行设计,那么通过先草拟您的想法来规划您希望内容在大屏幕上的行为方式。

死亡之星 II 演示的初始线框草图和设计探索

针对大型显示器进行优化的第一步是为它们规划。通过提前规划,您可以在深入之前最大程度地减少意外情况,并确保所有内容协同工作。如果您的设计流程涉及使用设计应用程序来可视化内容的行为方式,那么通过创建代表超大型屏幕的画布尺寸以及代表更传统屏幕尺寸的其他合成图来实现这一点。如果您更喜欢在浏览器中进行设计,那么通过先草拟您的想法来规划您希望内容在大屏幕上的行为方式。

使用相对单位构建

百分比、EM 和 REM 等相对单位对于响应式网站至关重要,因为它们提供了一种构建在 灵活基础 上的方法。通过在任何地方使用相对单位,我们可以确保测量结果保持比例,无论用户设置的字体大小如何。这与显式像素值形成鲜明对比,显式像素值不会相对于用户的设置进行缩放,因此如果用户放大或缩小默认字体大小,测量结果将不会成比例。

// Breakpoints
$bp-small: 48em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px

// Media Queries
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

以用于死亡之星 II 演示的媒体查询为例。通过用 EM 定义 媒体查询,我们确保设计按比例缩放,而不会在用户调整缩放级别时在浏览器中启用令人不快的滚动条。

缩放文本

除了媒体查询之外,相对单位在文本方面也很有用。只要网站上的所有文本都以相对值(例如 EM)定义,就可以通过调整<body>元素上的字体大小属性来全局控制字体大小。这在处理大屏幕时特别有用,因为它允许您随着屏幕尺寸的增加按比例全局放大字体,从而避免设计中的文本相对于屏幕显得太小。

为了在我们的演示中实现这一点,我们首先定义了一些变量。正如您在下面看到的,第一步是定义字体大小的基本值。在我们的例子中,它被设置为1em,这意味着我们默认使用浏览器设置的默认font-size。这个基本值可以在浏览器中轻松调整,但通常默认为16px。在这里定义基本line-height值与字体大小结合使用也很有用。您会注意到我们在这些line-height值的末尾省略了单位,也称为“无单位”值。通过这种方式设置行高,我们可以确保子元素可以根据其计算的字体大小计算其行高,而不是从其父元素继承此值。

// Font-Size
$base-font-size: 1em;

// Line-Height
$base-line-height: 1.5;
$header-line-height: 1.25;

接下来,我们将这些变量应用于我们的<body>元素,并随着屏幕变大而逐渐增加font-sizeline-height。如前所述,如果您在内容中将字体大小设置为相对单位(如 EM),这将放大所有地方的文本大小。

body {
  font-size: $base-font-size;
  line-height: $base-line-height;

  @media #{$mq-medium} {
    font-size: $base-font-size*1.2;
    line-height: $base-line-height*1.2;
  }

  @media #{$mq-large} {
    font-size: $base-font-size*1.3;
  }

  @media #{$mq-xlarge} {
    font-size: $base-font-size*1.4;
  }

  @media #{$mq-xxlarge} {
    font-size: $base-font-size*1.6;
  }
}

那么,将文本放大以适应屏幕比例会产生多大的差异呢?事实证明,差异相当大。看看下面的图片,它说明了当font-size在 body 上没有放大(左侧)和当font-size在 2560 像素宽处全局放大(右侧)时,我们演示之间的区别。放大后的版本不仅更易读,而且页面上的所有元素都已按比例放大以激活空间。

在 2560 像素宽处拍摄的屏幕截图,说明了不全局放大文本(左)与放大文本(右)之间的区别。

包含

在控制内容方面,响应式网页设计工具箱中几乎没有比无处不在的“容器”更有用的工具。这个元素只有一个目的,那就是控制内容可以扩展到的最大宽度。例如,以下是最常见的在 CSS 中定义这些元素的方式

.container {
  margin: 0 auto;
  max-width: 1024px;
}

这种方法有效,但它不适应大屏幕,因为最大宽度过于依赖特定宽度。即使max-width值增加到更大的值,它也不是相对于视窗宽度的。更好的方法是将左右边距定义为相对单位,并随着屏幕尺寸的增大而逐渐增加这些值。因此,内容将相对于屏幕宽度包含,如果屏幕很大,内容会感觉更舒适。

.container {
  margin: 0 4%;

  @media #{$mq-medium} {
    margin: 0 8%;
  }

  @media #{$mq-large} {
    margin: 0 12%;
  }

  @media #{$mq-xlarge} {
    margin: 0 18%;
  }
}

管理图像

您如何在超大屏幕上管理图像完全取决于项目的需要,但您很可能需要提供每个图像更高分辨率的变体,以确保图像不会太小。我们采用的方法不同,基于图像的应用方式。

.detail {
  height: 0;
  padding-bottom: 40%;
  margin: 0 0 $base-spacing*2;
  background-image: url(/Death-Star/detail_sml.jpg);
  background-position: center center;
  background-size: cover;

  @media #{$mq-xlarge} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_sml%402x.jpg);
  }

  @media #{$mq-medium} {
    background-image: url(Death-Star/detail_med.jpg);
  }

  @media #{$mq-medium} and #{$mq-retina} {
    background-image: url(/Death-Star/detail_med%402x.jpg);
  }

  // Additional media queries

}

对于背景图像,这很简单:在相应的元素上定义背景图像,为元素指定尺寸,并在媒体查询中定义更高分辨率的图像源。上面的图像说明了如何在我们的演示中完成此操作。请注意,我们将高度属性设置为0,提供底部填充,并将background-size属性设置为cover。这是一种称为“Uncle Dave’s Ol’ Padded Box”的技术,它允许我们通过基于父元素宽度的百分比填充来保持纵横比。

对于内联图像,我们现在有了HTML 规范,它允许我们扩展 img 和 source 元素以提供可用图像源及其大小的列表。这使浏览器可以使用此信息来选择最佳图像源。下面的图像详细说明了如何在我们的演示中实现这一点,我们在其中使用 srcset 和 sizes 属性定义了额外的图像源及其大小。这使浏览器能够根据屏幕尺寸和像素密度切换图像分辨率,从而提供最合适的图像。

<header role="banner" class="header">
  <div class="header__img">
    <img  
      srcset="./death-star_sml%402x.jpg 400w,
      ./death-star_lrg.jpg 600w,
      ./death-star_sml%402x.jpg 800w,
      ./death-star_lrg%402x.jpg 1200w"
      sizes ="(min-width:1336px) 75vw, 50vw"
      alt="Death Star 02">
  </div>
</header>

您可能注意到我们的内联图像上没有包含src属性。这是因为我们必须利用polyfill来启用对尚不支持 srcset 和 sizes 的浏览器的支持。没有支持的浏览器将预取 img 的 src(如果指定),这通常会导致浪费开销。为了防止这种情况,polyfill 作者建议省略 src,只使用 srcset。

结论

在任何屏幕尺寸下提供最佳体验至关重要。在优化内容以适应大型显示器时,我们不应该止步于常见的桌面分辨率。通过适当的规划,我们可以在构建响应式网站时利用现有的工具来放大和调整内容以适应大型显示器。

进一步阅读/工具