在 styles 目录的下面，新建一个 sass 文件 .. 名字可能是 _hero.scss ..

再打开 main.scss .. @import .. 导入刚才创建的 hero ...

里面先添加一个 .ui.hero ... 先用一个 background .. 设置一下背景 .. #f0f0f0

这里可以使用一下 sass 的嵌套功能 .. 每个项目的上面有个 .item 类 ..

它里面包装了文字还有图片内容 ..

文字是在 .content 这个容器里 .. 暂时先用一个 height ，设置一个固定的高度 .. 值可以是 600px

现在我们要让文字这块儿内容可以垂直居中 .. 这个 content 里面有一个子元素，就是 ui.container ..

先把这个 content 设置成 flex .. display: flex .. 再用一个 align-items .. 值可以是 center

在这个 content 容器里面的上边儿，还有下边儿可以添加点内容边距 ..

padding-top: 12% .. 这个内边距的值我用了百分比 .. 这个百分比的值是相对于它的包装容器的宽度 ..

padding-bottom: 16% .. 下边儿的内边距设置成 16%

这样我们就可以去掉上面添加的这个固定的高度 ..

回到浏览器 .. 调整一下容器的宽度 ... 你会发现，这个英雄区的高度会响应容器的宽度 ...

再回到样式 .. 这里我们可以让这个英雄区在大尺寸的屏幕上有一个固定的高度 ...

用一个媒体查询 ... 你可以直接把这个媒体查询嵌套在 .ui.hero 这里 .. sass 在编译成 css 的时候，会知道这是怎么回事儿 ..

@media only screen and (min-width: 1200px)

里面嵌套一个 item ... 它里面有个 content ，在这个 content 里面用一个 height ，把高度设置成 600px ..

现在，如果窗口宽度大于 1200 像素 .. 这个英雄区的高度，就会变成固定的 600 像素 ..