自己构建 - 标题

由于你的网站将在不同的设备上查看，因此是时候创建一个可以响应多种屏幕尺寸的页面导航了！

¥Since your site will be viewed on different devices, it’s time to create a page navigation that can respond to multiple screen sizes!

Get ready to…

为你的网站创建一个包含导航组件的标题
使导航组件具有响应能力

¥Try it yourself - Build a new Header component

Create a new Header component. Import and use your existing Navigation.astro component inside a <nav> element which is inside a <header> element.
Show me the code!
Create a file named Header.astro in src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

自己尝试一下 - 更新你的页面

¥Try it yourself - Update your pages

On each page, replace your existing <Navigation/> component with your new header.

Show me the code!

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Check your browser preview and verify that your header is displayed on every page. It won’t look different yet, but if you inspect your preview using dev tools, you will see that you now have elements like <header> and <nav> around your navigation links.

添加响应式样式

¥Add responsive styles

Update Navigation.astro with the CSS class to control your navigation links. Wrap the existing navigation links in a <div> with the class nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
</div>
```

Copy the CSS styles below into global.css. These styles:

Style and position the navigation links for mobile
Include an expanded class that can be toggled to display or hide the links on mobile
Use a @media query to define different styles for larger screen sizes

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* nav styles */

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

}

调整窗口大小并寻找在不同屏幕宽度上应用的不同样式。你的标题现在通过使用 @media 查询来响应屏幕尺寸。

¥Resize your window and look for different styles being applied at different screen widths. Your header is now responsive to screen size through the use of @media queries.

清单

¥Checklist

我可以使用 CSS 向我的网站添加响应元素。

资源

¥Resources

自己构建 - 标题

自己尝试一下 - 构建新的 Header 组件

自己尝试一下 - 更新你的页面

添加响应式样式

清单

资源