以下是 Jon Yablonski 的客座文章。Jon 告诉我，他最近参与了一个项目，该项目非常重视**巨型**屏幕。Jon 将向我们展示，就像任何类型的 RWD 工作一样，它需要规划。额外的媒体查询对于定位巨大显示器很有用，排版可以助你走得更远。
随着超高清显示器和能够通过智能电视浏览网络的设备的兴起，互联网越来越多的被访问和观看在比传统桌面显示器大得多的屏幕上。大多数网站在这方面都没有达到优化标准。但是，如果您正在构建响应式网站，那么您可能已经拥有了调整内容比例所需的工具。在这篇文章中，我们将探讨在大型显示器上优化网站的挑战和技术。
识别大型显示器
首先，让我们确定什么构成大型显示器。根据 W3Counter，设备宽度为 1366×768 像素的屏幕是最常见的大型设备分辨率。下一个常见的大型分辨率是 1920×1080 像素。这些值主要来自台式机显示器，大多数网站无需太多调整即可适应这些屏幕。
向上移动到更高分辨率，下一个最常见的设备宽度为 2560 像素。此宽度是您在大多数高清台式机显示器上可以找到的，这些显示器从 27 英寸开始。这也是大多数网站开始出现问题，因为屏幕上的空间过大。
以上图片显示了一些流行网站的小样本，这些网站都以 2560×1600 像素的屏幕尺寸捕获。正如您所见，这些网站都没有针对此比例进行优化：文本太小，在一个相对较小的空间中塞入大量内容，让眼睛难以聚焦，而且所有内容都被周围的空白区域所掩盖。这些因素都会降低可读性，导致用户体验不佳。
那么，是什么阻止设计师和开发人员针对大型显示器进行优化呢？答案肯定因团队而异，但确实存在一些技术挑战。让我们来找出这些挑战是什么。
大型显示器的挑战
针对大型显示器进行优化的挑战集中在如何缩放和管理内容上。将这些挑战细分为类别，它们看起来是这样的
内容编排
内容编排是指如何根据屏幕尺寸调整内容，在任何宽度下提供最佳的体验。屏幕越大，内容比例越不协调。这会导致一些问题：1）由此产生的笨拙空间分散注意力，2）过多的空间会掩盖内容，使内容看起来比实际更小，以及 3）可读性很可能会因此变得太小而降低。
一般来说，内容在小屏幕上的调整方式相当简单：我们将内容堆叠在一个列中，并在必要时调整视觉顺序。另一方面，我们在大屏幕上处理这个问题的方法差异很大，具体取决于内容和可用空间。如果您避免将内容调整为大型显示器上提供的额外空间，您的内容很可能看起来比周围的空白区域小。但是，如果您试图通过引入更多列来用内容填充空间，您可能会通过在屏幕的相对区域内呈现过多内容来在视觉上压倒用户。
图像
图像在大型显示器上带来了许多独特的挑战。由于大多数大型屏幕也是更高分辨率的，我们必须管理每个图像的额外变体，以确保提供适当的图像。此外，我们还必须管理图像在布局中的行为方式。与其他元素不随屏幕缩放的图像会导致它们之间出现不协调的空间间隙。相反，缩放过大的图像可能会抢占其他元素，显得过于突出。由于图像带来的挑战没有一劳永逸的解决方案，因此您必须根据内容的独特需求仔细考虑如何管理它们。
优化技术
现在我们已经确定了大型显示器带来的各种挑战，让我们来看看一些针对此比例优化内容的方法。
我创建了一个网站来演示我们将要探讨的针对大型显示器进行优化的每项技术。考虑到主题，我选择了一个在可扩展性方面看起来很合适的主题，即死亡之星 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-size和line-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 像素宽处全局放大（右侧）时，我们演示之间的区别。放大后的版本不仅更易读，而且页面上的所有元素都已按比例放大以激活空间。
包含
在控制内容方面，响应式网页设计工具箱中几乎没有比无处不在的“容器”更有用的工具。这个元素只有一个目的，那就是控制内容可以扩展到的最大宽度。例如，以下是最常见的在 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。
结论
在任何屏幕尺寸下提供最佳体验至关重要。在优化内容以适应大型显示器时，我们不应该止步于常见的桌面分辨率。通过适当的规划，我们可以在构建响应式网站时利用现有的工具来放大和调整内容以适应大型显示器。
我认为将视窗高度考虑在内也很重要。我使用的是 27 英寸显示器，但我不会全屏运行浏览器（为什么要这样做？）；相反，我运行它占据屏幕的一半，因此它的宽度“只有”1280 像素，但高度仍然是 1440 像素，因此我觉得我需要比在 1280×800 笔记本电脑屏幕上全屏运行浏览器时更大的文本。
确保您的内容在任何尺寸下都可读非常重要，可读性不仅仅是字体大小的功能，而且也是行长的功能。当行太长或太短时，读者可能会失去位置。每行 50-60 个字符似乎是一个最佳值。http://baymard.com/blog/line-length-readability
确实——感谢 Sunny 指出这一点！
如果我没有高分辨率显示器可供测试，那么测试我的设计的最佳方法是什么？在浏览器中缩小是否足以近似于布局的外观？
Firefox 的响应式设计模式和 Chrome 的设备模式都允许您输入 2560×1440 之类的大分辨率，但在 Firefox 中，您必须水平和垂直滚动才能查看整个布局，而在 Chrome 中，它会缩小。
Flimm，这个问题问得好。
与测试移动设备不同，如果手头没有大型显示器，我们在测试大型显示器时会受到限制。我建议使用 CrossBrowserTesting（crossbrowsertesting.com）之类的仿真工具，它允许您选择要测试的屏幕分辨率。如果您使用的是较小的屏幕，它会缩小内容以适合您的浏览器窗口，但您会对比例有一个很好的了解，当然您还可以使用开发人员工具来检查字体大小等。
使这类事情更加复杂的是，不仅有些显示器超宽，而且有些显示器还具有非常高的像素密度。
据我所知，这篇文章只提到了超宽显示分辨率，而不是 HiDPI 显示器。
如果您所说的高分辨率显示器是指 HiDPI 显示器，那么您就完全没有办法测试您的网站在没有实际拥有它的情况下会是什么样子。您的标准 DPI 显示器无法显示更高的像素密度，就像 480p 电视无法模拟 1080p 一样。
因此，标准 DPI 显示器上的 1500 像素宽分辨率与 HiDPI 显示器上的 1500 像素宽分辨率的显示方式完全不同。小文本将不容易阅读，图像可能看起来更模糊等等。
Daniel，你的观点很棒。
是的，你说得对，这篇文章主要针对大型显示器，以及如何优化规模。通过我上面描述的方法可以测试比例和规模，但在图像和文本的像素密度方面并不准确。为此，您需要实际的 HiDPI 设备。
我认为这是一篇很棒的文章，但还有另一个观点需要考虑。以苹果的 30 英寸 Cinema 显示器为例。它们是 2560×1600 分辨率。没有人会最大化这些显示器上的任何东西，原因与你不会在双显示器设置中最大化窗口相同。因此，Reddit、维基百科等的示例在这种情况下有些不相关。
另外，不要忘记缩放。缩放向上比向下工作得更好。因此，虽然缩小对移动设备帮助不大，但放大对更大显示器很有帮助。
当然，以上内容都不适用于你只是想呈现更多信息以填满屏幕空间，或者你想以更好的方式呈现现有信息，真正利用空间的情况。在这种情况下，请务必编写媒体查询以利用屏幕尺寸！我认为这才是这篇文章的真正目标。
感谢 Agop——你完全正确：重点是演示一些简单的技术，以利用可用的空间。而且我同意，浏览器的缩放功能很有用，但我认为在大型屏幕上首先优化内容是更好的选择。
关于在大型屏幕上最大化浏览器窗口：虽然我同意这对于休闲浏览来说不太可能，但我可以想象（并且见过）在其他情况下，例如演示等，这样做。但这是否是常见做法并不重要——重点是确保在任何屏幕尺寸下都能获得最佳体验。
我曾尝试证明这一点。
Chris，很棒的文章。我同意——拥有信息永远不是坏事，尤其是实际的浏览器大小与窗口大小。
是的，演示等理想情况下应该全屏，无论大小或分辨率。
我认为只要我们坚持使用 em 单位进行媒体查询，我们就可以兼得。如果你不放大，你会得到常规大小的内容，只是很多内容一起出现（尤其是在你将窗口最大化到 2560×1600 时）。然后，如果你放大，你会得到更少的内容，但看起来更大（更大的媒体查询不再适用）。最终，你可以放大到足以看到一个移动屏幕的巨大版本。
很棒的文章，谢谢。我一直对这方面很感兴趣，现在我将尝试确保我的作品针对更大屏幕进行了优化，以便未来可以正常使用！
Jon，好文章。
我非常有兴趣看到——在应用这些原则后，4 个有问题的网站的模拟会是什么样子。例如，维基百科会以容器为中心，还是雅虎会扩展以使用屏幕的全部空间？
谢谢 Susan！有趣的问题——也许需要一篇后续文章。每个网站都不同，应根据其内容做出具体决定，但我认为你提到的两个网站都可以从这里演示的方法中受益。
处理此问题的最简单方法——使用 rem 单位编写所有内容。然后你只需要更改全局字体大小，所有内容都会以正确的比例自动缩放。
唯一的例外是单页滚动网站，在宽高比不同的情况下会出现这种情况。但单页滚动网站不是标准的做法，遇到这种情况会有很多困难，这通常并不奇怪。
感谢你解决这个问题。我敢说人们在大型显示器上不将浏览器全屏显示的原因之一是，基本上没有网站利用了更大的画布。
即使现在一切都“响应式和自适应”，大型显示器仍然得不到任何关注，只有平板电脑和手机。CSS 中的工具和功能都存在，人们只需要利用它们。
电视怎么办？如果人们想说他们的网站是真正自适应和响应式的，难道分辨率较低的大型电视不应该也包括在内吗？此外，如何使用遥控器或手势浏览这些网站？在你草率地将这些视为边缘情况之前，请考虑一下，仅仅考虑这些可能性就能让你对不同的方法有新的认识，从而改善你的网站，使其更适合所有用户。
说得太好了——我完全同意 Thurstan。我们应该构建能够适应任何屏幕尺寸的网站，无论大小。我经常认为，重点是当今常见的屏幕尺寸，而忘记了我们无法预测未来的屏幕尺寸。
完全同意。未来是关于屏幕的，而不是某个设备上的某个特定屏幕。
能够在电视、台式机、13 英寸 4k 分辨率笔记本电脑、手机或平板电脑上很好地使用网站或“东西”非常罕见，即使有工具可以针对电视等设备（使用“设备像素比”）。
我终于看到有人注意到这个 RWD 问题。许多开发人员和设计师不理解 RWD 不仅仅意味着移动端，而且大多数流行网站在大型屏幕上看起来像一个小的列，文本不可读，只有增加默认缩放级别才能解决问题。
感谢你发表这篇文章。我也在为每个断点设置很多断点和不同的字体大小、填充。你是否在使用 Bootstrap 4/3 或任何其他 CSS/SASS 框架/库来处理大型屏幕？我不知道有谁优化了真正的现代 RWD，目前在 Bootstrap 4 中有很多自定义代码。
不客气，Mevrael！
关于框架或库：我倾向于使用自己的样板项目，这些项目基本上是我发现自己在每个项目中都会使用的一些代码的“迷你框架”。这种方法对我来说效果很好，因为它能让我更好地控制，并且代码膨胀程度更低。