注意：
1. 这个案例，是我写vue项目修改的，所以思路同样适用于vue框架项目。
2. 建议先把代码直接复制过去，先看一下效果。
3. 涉及到知识点，flex布局的属性配合使用 ， @media媒体查询的语法
4. 给ul设置 flex-wrap: wrap , 一定要允许li可以换行，我在这个坑里，躺了好几分钟。
5. 我写的时候，也花了不少时间，学的人应该更耐心些。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现响应式：flex布局 + 媒体查询</title>
<style type="text/css">
.site_introduce{
width: 1200px;
margin: 0 auto;
margin-top: 70px;
height: 250px;
border: 1px solid #00ff00;
}
li{
list-style: none;
}
.product_introduction{
width: 1200px;
margin: 0 auto;
}
.product_introduction ul{
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
flex-wrap:wrap;
}
.product_introduction ul li{
width: 272px;
height: 250px;
padding: 20px 0;
border: 1px solid #00ff00;
display: flex;
align-items: center;
justify-content: center;
}
.product_introduction ul li:hover{
background-color: #F2F2F2;
}
.product_introduction ul li>div>p{
text-align: center;
}
/* 设置图片样式 */
.introduce_pic{
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background-color: #F1F3F4;
text-align: center;
}
.introduce_pic img{
width: 70px;
padding-top: 18px;
background-repeat: no-repeat;
}
@media screen and (max-width:1200px) {
.product_introduction{
width: 928px;
margin: 100px auto;
}
}
@media screen and (max-width:928px) {
.product_introduction{
width: 646px;
margin: 100px auto;
}
}
@media screen and (max-width:646px) {
.product_introduction{
width: 364px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="product_introduction">
<ul>
<li>
<div>
<div class="introduce_pic">
<img src="dog.jpg" alt="hero" />
</div>
<p>随便的文本1</p>
</div>
</li>
<li>
<div>
<div class="introduce_pic">
<img src="dog.jpg" alt="hero" />
</div>
<p>随便的文本2</p>
</div>
</li>
<li>
<div>
<div class="introduce_pic">
<img src="dog.jpg" alt="hero" />
</div>
<p>随便的文本3</p>
</div>
</li>
<li>
<div>
<div class="introduce_pic">
<img src="dog.jpg" alt="hero" />
</div>
<p>随便的文本4</p>
</div>
</li>
</ul>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/tengyuxin/p/11118199.html
时间： 2024-10-10 11:25:20