响应式html5代码
时间: 2023-07-02 16:07:13 浏览: 45
以下是一个简单的响应式 HTML5 代码示例,它能够在不同设备上自适应显示:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #f2f2f2;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
nav a {
color: #333;
padding: 10px;
text-decoration: none;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
article {
background-color: #f2f2f2;
flex: 1;
margin: 10px;
padding: 10px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
@media screen and (max-width: 600px) {
nav, section {
flex-direction: column;
}
nav a {
display: block;
padding: 5px;
}
article {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>My Responsive Website</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<article>
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ante auctor, pretium sapien in, pharetra quam. Sed lacinia vel ex in bibendum. Ut sollicitudin porttitor tortor, vitae venenatis dolor fringilla ac. </p>
</article>
<article>
<h2>Article 2</h2>
<p>Proin tincidunt eget enim eu venenatis. Nunc euismod efficitur enim, nec consectetur arcu commodo sed. Donec eget odio ut odio ullamcorper malesuada. Nullam euismod mi at eros condimentum suscipit. </p>
</article>
<article>
<h2>Article 3</h2>
<p>Suspendisse potenti. Praesent quis tellus vitae neque lacinia imperdiet. Donec nec eleifend nisl. Nam a magna posuere, ullamcorper elit vel, vulputate lorem. Aliquam euismod, dui a mattis vestibulum, lorem quam suscipit turpis, nec blandit elit lacus non mauris.</p>
</article>
</section>
<footer>
<p>© 2021 My Responsive Website</p>
</footer>
</body>
</html>
```
在上面的代码中,我们使用了 `@media` 查询和 CSS 弹性盒子布局来使网页在不同的屏幕尺寸下自适应显示。具体来说,我们在屏幕宽度小于 600 像素时将导航栏和文章列表改为垂直排列,并将文章宽度设置为 100%。这样,我们的网页就能够在手机、平板和电脑等不同设备上良好地显示。