媒体查询 响应式 练习
时间: 2023-08-20 16:06:03 浏览: 53
好的,您可以尝试以下练习:
1. 创建一个响应式布局,当屏幕宽度小于等于 768px 时,导航栏变为折叠式菜单。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>响应式布局练习</title>
<style>
/* 默认样式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
/* 折叠式菜单 */
ul {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
background-color: #f9f9f9;
z-index: 1;
}
li {
display: block;
text-align: center;
margin-bottom: 5px;
}
a {
border-bottom: 1px solid #ccc;
}
/* 显示折叠式菜单 */
.menu-toggle:checked ~ ul {
display: block;
}
}
</style>
</head>
<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle">菜单</label>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
```
2. 创建一个响应式布局,当屏幕宽度小于等于 480px 时,图片和文字改为垂直排列。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>响应式布局练习</title>
<style>
/* 默认样式 */
.container {
display: flex;
justify-content: center;
}
.item {
margin: 20px;
text-align: center;
}
img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
h2 {
margin-top: 10px;
font-size: 24px;
}
p {
margin-top: 5px;
font-size: 16px;
color: #999;
}
/* 媒体查询 */
@media screen and (max-width: 480px) {
/* 垂直排列 */
.container {
flex-direction: column;
}
h2 {
font-size: 20px;
}
p {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="https://picsum.photos/id/237/200/200" alt="图片" />
<h2>标题</h2>
<p>描述</p>
</div>
<div class="item">
<img src="https://picsum.photos/id/238/200/200" alt="图片" />
<h2>标题</h2>
<p>描述</p>
</div>
<div class="item">
<img src="https://picsum.photos/id/239/200/200" alt="图片" />
<h2>标题</h2>
<p>描述</p>
</div>
</div>
</body>
</html>
```