不使用媒体查询创建响应式布局

🤷‍♂️ 卡住了？媒体查询是你的救星。

🚈 从哪里开始？

🕸 让我们加入网格吧。

⚡ 让我们开始 Flex

📚 进一步阅读

大家好！👋 自从网格和弹性框以其独特的优势（例如让内容在视口中响应式流动）问世以来，这个问题就成了热议话题。📱

然而，对于那些刚开始使用 grid 和 flexbox 等高级 CSS 技术的人来说，这也可能令人恐惧😨，他们可能能够设计出好看的布局🤩，但不能使它们具有响应性——不需要媒体查询。

🤷‍♂️ 卡住了？媒体查询是你的救星。

事实证明，在浮动和清除固定元素出现之前，编写媒体查询几乎是响应式设计的实际标准。然而，在网格和弹性框出现之后，情况发生了变化。人们想出了不用编写大量媒体查询，就能让页面拥有令人惊叹的响应式外观的方法。🤗

那么，我是不是应该停止编写媒体查询了？👀 事实上，不需要，因为即使你遇到瓶颈，媒体查询也总会为你提供帮助。它们随时为你服务，但问题是，它们真的值得你写在那个地方吗？如果你找不到其他办法，这就是你的@media疑问所在。💁‍♂️

🚈 从哪里开始？

嗯，这是一个开放性问题。我不会在这篇博文里指导你如何构建下一个 Twitter 或 Facebook，而是给你一个简单的类比，说明实现响应式设计所需的东西。记住，就是“简单”。没错，你懂的。💪

flex我希望你对这方面有基本的了解grid，甚至了解它们是什么或如何运作。有了想法后，你可以随时回来这里。

🕸 让我们加入网格吧。

如何设置网格结构？

我们知道，写完之后display: grid，我们需要定义布局的行和/或列。因为我们这里要创建一个响应式布局，它是动态的，以适应不同的视口，所以它不能是像像素或 rem 这样的静态单位。我们需要一些网格魔法。💫

PS： 1fr 表示总可用空间的一小部分。

信不信由你！😱 上面这行代码就足以让你设置一个基本的响应式布局，比如下面这个。告诉你，你甚至不需要定义任何行，因为网格会自动计算。🤖 除此之外，你还可以添加一个自定义的行距grid-gap，在行间添加一些漂亮的空白。

专业提示： 您可以通过单击 0.5x、1x 或 2x 之一来更改 codepen 的视口。

原始网格布局

当然，这里还需要一些额外的样式来实现这一点，但我认为网格是最棘手的部分。我们刚刚给这里的所有项目都添加了一些样式，让它看起来像一个盒子！🥳

🐒 为什么auto-fit每次都是这样？

呵呵，每次都不多，不过还有一个属性叫**auto-fill**，可以根据自己的需求来使用。

自动填充和自动调整之间的区别

auto-fill当视口宽度增加时，会创建更多与其大小相同的列，而不是适应视口宽度，而auto-fit则相反。它会拉伸其项目以获得完整的视口宽度。因此，您现在可以根据需要使用其中任何一个。

请参阅下文以了解更多详情。

⚡ 让我们开始 Flex

Flexbox 是一维容器，对于只需要单向流动的布局来说，它表现得非常出色。所以它绝对符合我们的用例。

PS：尽管这里的关键不是在不使用一个媒体查询的情况下让整个网页响应，即使它确实使页面的单个部分响应，也是值得的。

✨ 神奇的flex-wrap财产

这条线，让一切看起来都恰到好处。所以，flex-wrap这是弹性容器上定义的一个属性，用来决定弹性项目是强制保持在一行，还是可以移动到多行，也就是响应式风格。🌠

flex-wrap 的属性

所以，在本例中，我们将使用flex-wrap: wrapflex 容器包裹项目，为我们的组件带来一种闪亮的响应式感觉。我们还使用了 tiny 元素，justify-content: space-around使其看起来更加对称。😎

🌈 我现在可以制作响应式布局吗？

是的。你已经学习了制作出色布局背后的概念。你可以从我上面的代码开始，只需摆弄代码，然后用你的内容替换颜色块，慢慢来。你一定会成功的。记住，你随时可以@media使用查询，所以如果你真的需要它们，请随时使用。

📚 进一步阅读

• 填充还是适配？有什么区别？ ——CSS Tricks
• Flex Wrap，来自 CSS Tricks
• 我强烈建议观看Jen Simmons 的频道Layout Lands 。
• 使用 CSS 网格布局实现常见布局，作者：MDN Docs

如果你喜欢这篇文章，你或许也会喜欢我在推特上分享的内容。我们一起来看看吧！❤