8、网页布局与交互开发指南

网页布局与交互开发指南

1. 自适应布局挑战

1.1 青铜挑战：纵向布局

当前的媒体查询是基于视口宽度来改变布局的，其实还可以从另一个角度考虑，即视口的纵横方向。视口有两种方向模式：一种是高度大于宽度，另一种是宽度大于高度。可以查看MDN关于媒体查询的文档，更新媒体查询，使布局根据视口方向而非宽度进行改变。

1.2 Flexbox布局资源

开发者Philip Walton维护了两个重要的Flexbox资源：
- Solved by Flexbox ：网站（philipwalton.github.io/solved-by-flexbox）提供了使用Flexbox实现常见布局的演示，以及创建这些布局所需的所有信息。有些布局如果不使用Flexbox很难实现。
- Flexbugs ：页面（github.com/philipwalton/flexbugs）。Flexbox虽然很棒，但并不完美。该页面为开发者在使用Flexbox时遇到的常见问题提供了解决方案和变通方法。这些信息由遇到过这些问题的开发社区成员提供，并且列表维护得很好。

1.3 黄金挑战：圣杯布局

在尝试这个挑战之前，一定要复制一份代码！因为这需要对标记和样式进行重大更改。使用复制的代码进行挑战，保留原始代码以便开始下一阶段的工作。
参考Solved by Flexbox，在Ottergram中实现圣杯布局。创建一个带有缩略图的第二个导航栏，并将其放置在视口的另一侧。同时，确保在页面底部添加一个页脚元素，使用 <footer>