响应式布局网格图片

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

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

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

宽屏的结果:

小屏幕的结果:

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

版权声明:著作权归作者所有。

thumb_up 0 | star_outline 0 | textsms 0