使用 Flexbox 实现响应式设计

关于响应式设计的书籍已经有很多，而且都是很好的著作。

由于本课程专注于Flexbox布局模型，我不会深入探讨响应式设计的方方面面。

正如我之前提到的，使用Flexbox模型本身就能获得一定的响应式效果。

Flexbox即“灵活的盒子”。然而，我们也可以通过媒体查询来针对不同的屏幕尺寸，并相应地调整Flexbox的行为。

下面是一个示例。

熟悉的无序列表再次登场：

1<ul>
2  <li>首页</li>
3  <li>关于</li>
4  <li>联系</li>
5  <li>注册</li>
6  <li>登录</li>
7</ul>

配合一些样式：

1ul {
2  list-style-type: none;
3  display: flex;
4  border: 1px solid #4e4e4e;
5}
6
7li {
8  flex: 0 0 auto;
9  padding: 10px;
10  margin: 10px;
11  background-color: #8cacea;
12  color: #fff;
13  font-size: 1em;
14}

你现在已经是Flex布局的高手了，所以应该能理解上面代码的作用。

这就是导航栏目前的样子。

虽然这种布局在桌面端和平板上表现不错，但在某些较小的屏幕上看起来并不理想。

在移动设备上，你可能希望将导航项垂直堆叠。

这时就可以用到媒体查询：

1@media screen and (max-width: 769px) {
2  /* 仅对宽度小于769px的屏幕设备生效 */
3  ul {
4    flex-direction: column; /* 在小屏幕上改变排列方向 */
5  }
6}

如果你之前对响应式设计有一定了解，那太好了。

只需将Flexbox模型融入你已有的知识体系，就能轻松掌握。

顺便提一下，我假设你已经了解什么是媒体查询。如果还不清楚，请参看下面的简要说明。

媒体查询

媒体查询是响应式设计的核心。它们允许你针对特定的屏幕尺寸，指定只在这些设备上运行的样式代码。

媒体查询最常见的形式是 @media 规则。

它的写法如下：

1@media screen and (max-width: 300px) {
2  /* 在此代码块中编写你的CSS样式 */
3}

从结构上看，你几乎可以猜出它的作用：

“对于最大宽度为300px的屏幕设备……执行以下操作”

代码块中的所有样式仅适用于满足条件 screen and (max-width: 300px) 的设备。

我想这应该帮你澄清了一些疑惑。

快速练习

Catty音乐网站在移动设备上的显示效果不同，这很好。更棒的是，你可以尝试自己复现这个效果。

你快要完成课程了！

在最后一课中，我会介绍浏览器支持情况、实用的链接和资源，帮助你继续前进。我相信你会喜欢的。