网页布局，就像2020年的样子
作者：法昆多·科拉迪尼✏️
如果你觉得设计师和开发者来自不同的世界，那你应该看看十年前或二十年前是什么样子。在互联网早期，我们一边搭建网站，一边还在摸索网站究竟是什么，以及它应该如何运作。
由于设计师们拥有印刷背景，他们习惯了固定尺寸画布的特性（和局限性），并试图在本质上与此截然不同的媒介中复制这些特性。开发者们则在早期 CSS 极其有限的功能下苦苦挣扎，试图在彼此差异巨大的浏览器中实现这些设计。
在这一切之中，用户得到的网络体验却非常难以访问、难以使用，而且毫无美感可言。
随着时间的推移，我们基于对称列的概念（例如960.gs），就网站的外观和用户体验达成了一套核心规则。后来，许多流行的框架，包括 Bootstrap，都采用了这种对称列布局。这简化了流程，提供了一种设计师、开发人员和用户都感到舒适的通用语言。
但我相信，和我一样感到网页布局停滞不前的，绝非我一人之感。我们都看过那些“所有网站看起来都一样”的恶搞视频，以至于这些恶搞视频本身也开始变得千篇一律了。
CSS 自诞生之初就取得了长足的进步，尤其是在过去几年里，其开发周期更是大幅加快。最终，网页布局不再是权宜之计了（浮动最初只是为了让文本围绕图像浮动）。
我们获得了多列布局、弹性布局和网格布局，这赋予了我们前所未有的自由度。我们终于可以打破对称列的固有模式，使用各种以前想都不敢想的效果和功能。我们不再身处21世纪初了。
新的规范允许我们构建一些布局，而这些布局在几年前会因为无法使用或缺乏响应性而被我们弃用。所以我认为现在是时候重新审视这些概念了。或许我们可以以一种适应网络未知环境的方式，重新引入一些类似印刷品的布局。
今年年初，Jenn Simmons 分享了一些杂志版面设计作为灵感，她想知道这些设计如何应用于网页。我随后将它们转换成了代码，这样我们就可以探讨构建与主流网页布局不同的核心概念。以下是如何构建符合 2020 年潮流的网页布局。
别工作了，别工作了。今天是星期天，去咖啡馆放松一下，看看杂志什么的。啊……
等等，CSS 能实现这个吗？我能用这个做个演示吗？天哪，我们需要实现/改进 Exclusions 规范。还有 Regi——
别工作了！！
不过，我们来做演示吧！2019年1月13日 下午4:58
响应式、渐进式布局的思考
从定义上讲，网页设计就是为一张未知的画布进行设计。用户可以通过各种尺寸迥异的设备，使用各种浏览器访问网页——从小型移动设备甚至智能手表，到巨大的 4K 智能电视，更不用说那些并非基于图形显示的其他各种方式了。
因此，将杂志版面转换为网页版面的首要挑战在于如何使其适应不同的访问设备。这种方法在哪些情况下不再适用？替代方案应该是什么样的？浏览器在实现过程中可能遇到哪些技术限制？
根据这种布局，我指出了其中可能具有挑战性的部分。
- 多列布局在大屏幕上或许可行，但对于小屏幕尺寸的设备来说肯定行不通。
- 标题本身带有“居中浮动”效果，大多数浏览器都无法处理。
- 各栏之间的引言段落可能有点棘手。
幸运的是，如果我们从一开始就采用渐进增强的方法，这个问题几乎就能迎刃而解。我们可以把所有不同的层都看作是渐进增强：从使用媒体查询来适应不同的视口尺寸，到使用功能查询安全地添加新功能，再到添加诸如prefers-reduced-motion或dark mode 之类的辅助功能（使用 prefers-color-scheme）。每一层都可以在前一层的基础上协同工作，从而为特定设备创造最佳的用户体验。
我个人喜欢先从网站完全不加载 CSS 时的外观入手。这意味着只使用语义化的标记语言，并按照合理的顺序排列。这样即使我们完全剥离 CSS，只保留浏览器的默认样式，网站仍然可用。
<article class="print-like">
<header class="intro">
<h1 class="title">Print-like Layouts on the web</h1>
<p class="summary">We've been stuck for decades in the simetrical columns paradign. Let's try to spice things up a little.</p>
<address class="author">By <a rel="author" href="https://twitter.com/fcorradini">Facundo Corradini</a><br/>
</address>
</header>
<img class= "main-image" src="https://placeimg.com/640/480/animals/sepia" alt="random image"/>
<section class="main-text">
<p>...</p>
<p>...</p>
<p>...</p>
</section>
</article>
语义标记按逻辑顺序排列意味着我们可以先放标题，然后是引言、段落，再逐步增强布局以适应更宽的屏幕和不同的功能。
移动端布局最大的优点在于，它通常与浏览器默认布局差别不大。当然，我们在字体、间距等方面投入了大量精力，但移动端内容很少会采用除传统块状布局（元素上下排列）之外的其他格式。
那么我们可以考虑稍大一些的屏幕尺寸。如果视口宽度足以容纳两列，但又不足以显示完整的布局，该怎么办呢？
将标题和引言放在所有内容之上，而将段落放在两列中，列宽可变，并根据需要增加，这样比较合理。
只需在媒体查询中将文本容器更改为多列布局即可解决问题。
@media screen and (min-width: 600px){
.print-like{
display: grid;
}
.main-image{
grid-row: 3/4;
}
.main-text{
column-count: 2;
}
.main-text :first-child{
margin-top:0;
}
.main-text :last-child{
margin-bottom: 0;
}
}
当视口足够大，可以容纳所有列（包括中间的容器）时，我们可以使用 `column-gap` 属性来清理中间的空间，以便放置标题和简介，然后使用简单的网格布局声明将元素放置在容器中。虽然最初的设计基于三分法，但我选择保持中间列的宽度固定，并让两侧列根据容器自动调整，这只是一个实验，看看打破对称列布局模式会发生什么。
@media screen and (min-width: 900px){
.print-like{
grid-template-columns: 1fr 300px 1fr;
align-items: center;
}
.intro{
grid-row:1;
grid-column: 2/3;
max-width: 0px;
}
.main-text{
column-gap: 310px;
grid-row: 1;
grid-column: 1/4;
}
.main-image{
grid-column: 1 / -1;
margin: 0 auto;
}
}
最后一步——也是让布局最终成型的关键——是文本环绕标题。遗憾的是，我们需要使用 CSS 排除项来实现这种效果，因为 CSS 本身并没有提供这种特性float: center。这意味着只有 IE11 和 Edge 浏览器才能提供这种体验，这颇具讽刺意味。不过，其他浏览器仍然能够提供完全可用的布局，而且当它们最终决定实现该功能时，这段代码很可能仍然有效（如果规范有所更改，可能需要进行一些小的调整）。
@media screen and (min-width: 900px){
@supports (-ms-wrap-flow: both){
.title{
-ms-wrap-flow: both; /* CSS exclusions! */
position: absolute;
right: 25%;
padding: 10px 20px;
}
}
}
经过所有这些图层，最终布局将如下所示：
结论
首先要说明的是：我并不是说当前的模式是错误的，也绝对不是说网站应该像杂志一样——甚至不是在为多色布局辩护。我只是觉得，稍微创新一下就能让我们的布局脱颖而出。我们终于拥有了合适的工具，那就让网页布局更加多样化吧！
编者按：发现本文有误？您可以在这里找到正确版本。
插件：LogRocket，一款用于 Web 应用的 DVR
LogRocket是一款前端日志工具，可让您重现问题，如同在您自己的浏览器中发生一样。无需猜测错误原因，也无需用户提供屏幕截图和日志转储，LogRocket 即可让您重现会话，快速了解问题所在。它与任何框架的应用程序完美兼容，并提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文信息。
除了记录 Redux 操作和状态之外，LogRocket 还会记录控制台日志、JavaScript 错误、堆栈跟踪、包含标头和正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能生成像素级精确的视频。
免费试用。
这篇文章《2020 年的网页布局》最初发表于LogRocket 博客。
文章来源：https://dev.to/bnevilleoneill/web-layouts-like-it-s-2020-4080