使用 CSS 网格的响应式网站

ev2 {

这篇博文介绍了我使用构建响应式网站的强大工具CSS 网格布局 构建的网站之一。

我在学习 Grid 时观看了WesBos 教程，并在之后进行了练习（这对我来说是一种很好的学习方式）。

页面内容和布局

这里的页面内容非常简单：

1. div带有类wrapper- 主要包装布局元素

<div class="wrapper">

1. 包装器内部有div一个类top- 该元素负责页面顶部的内容：

<div class="top">

1. 顶部内部，主图像右侧有header2 个号召性用语区域：div

<header class="hero">
 <div class="call-to-action call-to-actiont-1">
<div class="call-to-action call-to-actiont-2">

1. 顶部之后是nav菜单元素：

<nav class="menu">

1. 菜单导航内包含button和ul元素。我们在此处创建button，以便能够切换菜单并展开/折叠菜单。Menu -list元素包含菜单中不同菜品的链接：

<button aria-expanded="false" aria-controls="menu-list">
 <ul id="menu-list">

1. 菜单类后的包装器内部有 3 个部分：

<section class="features">
 <section class="about">
<section class="gallery">

1. 特色部分有 4 个div元素，分别描述玉米饼、啤酒、葡萄酒和音乐：

<div class="feature">

1. 关于部分包含有关特色玉米卷的信息，图库部分包含图片。

每个 HTML 代码块都使用 CSS 网格布局进行样式设置。本项目中最常用的 CSS 属性如下：

• display: grid
• grid-gap
• grid-template-areas
• grid-template-columns

例如：

.features {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

网站完全响应式设计，我们使用@media查询功能根据需求重新排列页面布局width。以下图片分别适用于桌面版、平板电脑版和手机版。

桌面版

平板电脑版本

在平板电脑版本中，菜单会折叠，仅显示“菜单”按钮。页面布局也发生了变化：

此图演示了用户切换菜单按钮时的菜单部分：

移动版

感谢您阅读我的博客。欢迎在LinkedIn或Twitter上与我联系:)