昨天弄了一个简单的菜单的响应式布局的案例，对这一块有了一些基本的理解。今天来试试一个多个图片的响应式布局：
需求：在一个容器里面，有多个图片。如果屏幕比较大，那么就排列成两列，而小屏幕的手机排列成一列。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="grid-style.css">
<title>grid-img</title>
</head>
<body>
<div class="container">
<div class="columns">
<img src="./images/1.jpg">
</div>
<div class="columns">
<img src="./images/2.jpg">
</div>
<div class="columns">
<img src="./images/3.jpg">
</div>
<div class="columns">
<img src="./images/2.jpg">
</div>
<div class="columns">
<img src="./images/3.jpg">
</div>
<div class="columns">
<img src="./images/1.jpg">
</div>
</div>
</body>
</html>下面是css代码：
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html {
font-size:16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.columns img{
width: 100%;
}
.columns {
flex: 50%;
max-width: 50%;
padding: 5px;
}
@media (max-width: 600px) {
.columns {
flex: 100%;
max-width: 100%;
}
}宽屏的结果：
小屏幕的结果：
注意：这里只是基本的框架哈，具体的优化样式，根据具体的需求来。
