如何用HTML和CSS使商品模块适配屏幕尺寸？

1. 修复HTML结构问题 #

li标签必须嵌套在<ul>或<ol>中，这是HTML规范要求，先调整结构：

<ul class="product-container">
    <li *ngFor="let product of products">
        <div class="product-card">
            <h2 class="product-title">{{product.title}}</h2>
            <div class="product-details">
                <img class="product-image" [src]="product.imageUrl">
                <div>
                    <p>Description:</p>
                    <p>{{product.description}}</p>
                </div>
                <div>
                    <p>Location: <span>Mock Location</span></p>
                </div>
            </div>
        </div>
    </li>
</ul>

注：把id改为class（避免重复id冲突），用Angular的属性绑定[src]替代插值表达式，更符合框架规范。

2. 调整CSS实现响应式布局 #

修改后的CSS会让商品卡片自适应屏幕宽度，不会超出可视范围：

/* 商品容器：允许换行，添加内边距避免内容贴边 */
.product-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* 使用相对单位，适配不同屏幕尺寸 */
    padding: 1rem;
    margin: 0;
}

/* 商品卡片：设置自适应规则，限制宽高范围 */
.product-container li {
    list-style: none;
    flex: 1 1 300px; /* 最小宽度300px，空间充足时自动拉伸 */
    max-width: 400px; /* 最大宽度避免在大屏幕上过度拉伸 */
    border: 1px solid #eee; /* 可选：添加边框区分卡片 */
    border-radius: 8px;
    padding: 1rem;
}

/* 响应式图片：不超出容器，保持比例 */
.product-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 图片居中显示 */
}

.product-title {
    text-align: center;
    margin-top: 0;
}

.product-details {
    margin-top: 1rem;
}

关键修改说明 #

• flex-wrap: wrap：让flex容器在空间不足时自动换行，避免内容横向溢出屏幕
• flex: 1 1 300px：设定卡片最小宽度为300px，屏幕宽度足够时自动填充剩余空间
• max-width: 400px：限制卡片最大宽度，防止在大屏幕上过度拉伸影响观感
• 图片使用max-width: 100%+height: auto：确保图片始终适配容器宽度，不会超出卡片范围
• 用rem作为间距单位：比固定像素更适配不同字号和屏幕尺寸

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