用现代CSS重建一个特色新闻栏目：Vox新闻

Your new development career awaits. Check out the latest listings.ads via Carbon

你的新发展事业正在等待。查看最新的招聘信息。通过Carbon的广告

Looking at a layout at first glance might imply that it’s easy and straightforward to build. The moment you start building the initial layout, you will face challenges that you didn’t think about in your initial look at the design.

乍看一个布局，可能意味着它很容易、很直接地建立起来。当你开始构建最初的布局时，你将面临你在最初看设计时没有想到的挑战。

In this article, I will rethink how to build the featured news section on Vox.com and try to see if modern CSS will be helpful or not. For example, do we need to use container queries? Or fluid sizing? That’s the goal of this article. It’s a journey as I think aloud about building a layout that seems simple.

在这篇文章中，我将重新思考如何在Vox.com上建立特色新闻栏目，并尝试看看现代CSS是否会有帮助。例如，我们是否需要使用容器查询？或者流体尺寸？这就是这篇文章的目标。这是一个旅程，因为我大声思考建立一个看似简单的布局。

Table of contents

目录

Analyzing the section

分析这一节

In the largest viewport, we have a 3 columns layout. Two of the columns take 25% of the width, and the middle one takes 50%. Here is a visual that shows them:

在最大的视口中，我们有一个3列布局。其中两列占宽度的25%，中间一列占50%。下面是一个显示它们的视觉效果：

Now that we have an idea about the columns, let’s take a look at the components within them.

现在我们对列有了一个概念，让我们来看看其中的组件。

It might look a bit confusing to spot the differences, but I will walk you through each change so we can have an idea about what’s changing on each viewport size.

要发现这些差异可能看起来有点混乱，但我将带领你完成每一个变化，这样我们就可以了解每个视口尺寸上的变化。

Changes from the large to medium

从大型到中型的变化

• Featured section: almost the same, but with a different font size that is changing based on the viewport width.
• 特色部分：几乎相同，但有一个不同的字体大小，根据视口宽度变化。
• Blue section: the font size of each card title got smaller.
• 蓝色部分：每张卡片标题的字体大小变小。
• Pink section:
  • The first article’s thumb is hidden.
  • Layout is changed from one column to three columns.
  • Adding a separator at the top of the section.
• 粉红色部分：
  • 第一篇文章的拇指被隐藏。
  • 版面从一栏改为三栏。
  • 在该部分的顶部增加了一个分隔符。

Changes from medium to small

从中型到小型的变化

• All articles will switch to the horizontal style with the thumbnail shown for each one.
• 所有的文章将切换到水平风格，每篇文章都显示缩略图。
• The ...