Django实现响应式多图移动端横向滑动展示的适配问题求解

适配方案及修改后完整代码 #

{% load static %}
{% include 'base.html' %}

<style type="text/css">
.container {
    width: 90%;
    margin:0 auto;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align:center;
    flex-wrap: wrap; /* 桌面端自动换行展示所有图片 */
    gap: 10px; /* 统一控制图片间距，替代原有box的margin属性 */
}

/* 移动端适配断点，可根据需求调整阈值 */
@media (max-width: 768px) {
    .container {
        flex-wrap: nowrap; /* 禁止元素换行，所有图片保持横向排列 */
        justify-content: flex-start; /* 左对齐，滚动从最左侧开始 */
        overflow-x: auto; /* 横向超出容器部分支持滚动 */
        scroll-snap-type: x mandatory; /* 可选：滚动吸附，滑动后自动对齐到完整图片位置 */
        /* 隐藏不同浏览器的默认滚动条，提升视觉体验 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .container::-webkit-scrollbar {
        display: none;
    }
    .box {
        scroll-snap-align: start; /* 配合滚动吸附使用 */
        flex-shrink: 0; /* 禁止图片盒子被压缩，保证固定尺寸 */
    }
}

.box {
    width: 128px;
    height: 128px;
    background: gray;
    transition: 0.5s;
}

.box img {border-radius: 6px;}

.box:hover {
    transform: scale(1.2);
    background: black;
    z-index: 2;
}

body {
    background-color:white; 
}
</style>

<div class="container" >
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
    <div class="box"><img src="{% static 'images/128.jpg' %}" class="img-fluid" alt="Responsive image" ></div>
</div>

核心改动说明 #

• 桌面端容器新增flex-wrap: wrap属性，保持原有全部展示的效果不变
• 新增移动端媒体查询规则：
  • 禁止容器内元素换行，所有图片保持横向排列
  • 给容器增加横向滚动属性，超出屏幕宽度的内容可通过手指滑动查看
  • 隐藏默认滚动条，避免破坏页面视觉效果
  • 给图片盒子新增flex-shrink: 0属性，避免移动端盒子被压缩变形
• 可调整的参数：修改媒体查询的768px阈值可以调整适配的屏幕尺寸，修改box的宽度可以调整移动端一屏展示的图片数量

内容的提问来源于stack exchange，提问作者Prusa