代码示例:(标识:css_mediaqueries_img_gallery)
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* 创建彼此相邻的四个相等的列 */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* 响应式布局 - 制作两列而不是四列的布局 */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>响应式图像网格</h1>
<p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="/static/demo/images/tulip-red.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow-2.jpg" style="width:100%">
<img src="/static/demo/images/flower-2.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow.jpg" style="width:100%">
<img src="/static/demo/images/flower-3.jpg" style="width:100%">
<img src="/static/demo/images/tulip.jpg" style="width:100%">
<img src="/static/demo/images/flower-1.jpg" style="width:100%">
<img src="/static/demo/images/flower-4.jpg" style="width:100%">
</div>
<div class="column">
<img src="/i/photo/tulip-yellow-2.jpg" style="width:100%">
<img src="/static/demo/images/tulip.jpg" style="width:100%">
<img src="/static/demo/images/flower-3.jpg" style="width:100%">
<img src="/static/demo/images/flower-1.jpg" style="width:100%">
<img src="/static/demo/images/flower-4.jpg" style="width:100%">
<img src="/static/demo/images/tulip-red.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow.jpg" style="width:100%">
<img src="/static/demo/images/flower-2.jpg" style="width:100%">
</div>
<div class="column">
<img src="/static/demo/images/tulip-red.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow-2.jpg" style="width:100%">
<img src="/static/demo/images/flower-2.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow.jpg" style="width:100%">
<img src="/static/demo/images/flower-3.jpg" style="width:100%">
<img src="/static/demo/images/tulip.jpg" style="width:100%">
<img src="/static/demo/images/flower-1.jpg" style="width:100%">
<img src="/static/demo/images/flower-4.jpg" style="width:100%">
</div>
<div class="column">
<img src="/static/demo/images/tulip-yellow-2.jpg" style="width:100%">
<img src="/static/demo/images/tulip.jpg" style="width:100%">
<img src="/static/demo/images/flower-3.jpg" style="width:100%">
<img src="/static/demo/images/flower-1.jpg" style="width:100%">
<img src="/static/demo/images/flower-4.jpg" style="width:100%">
<img src="/static/demo/images/tulip-red.jpg" style="width:100%">
<img src="/static/demo/images/tulip-yellow.jpg" style="width:100%">
<img src="/static/demo/images/flower-2.jpg" style="width:100%">
</div>
</div>
</body>
</html>