响应式布局网格图片

昨天弄了一个简单的菜单的响应式布局的案例，对这一块有了一些基本的理解。今天来试试一个多个图片的响应式布局：

需求：在一个容器里面，有多个图片。如果屏幕比较大，那么就排列成两列，而小屏幕的手机排列成一列。

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%;
	}
}

宽屏的结果：

小屏幕的结果：

注意：这里只是基本的框架哈，具体的优化样式，根据具体的需求来。

响应式布局网格图片

意见和建议