响应式布局-1使用弹性布局（如Flexbox、Grid）来创建自适应的网格系统，使元素能够根据容器的大小自动调整。

场景：响应式产品卡片网格

背景描述

你正在为一个在线电子商务平台开发产品展示页面。这个页面需要展示一系列产品卡片，并且这些卡片需要根据用户设备的屏幕大小自动调整布局，以确保在所有设备上都能提供良好的用户体验。具体要求如下：

1. 在大屏幕设备（如桌面电脑）上，每行展示4个产品卡片。
2. 在中等屏幕设备（如平板电脑）上，每行展示2个产品卡片。
3. 在小屏幕设备（如手机）上，每行展示1个产品卡片。

为了实现这一目标，你决定使用CSS的弹性布局系统——Flexbox或Grid。

具体实现

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Product Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="product-grid">
        <div class="product-card">Product 1</div>
        <div class="product-card">Product 2</div>
        <div class="product-card">Product 3</div>
        <div class="product-card">Product 4</div>
        <div class="product-card">Product 5</div>
        <div class="product-card">Product 6</div>
        <div class="product-card">Product 7</div>
        <div class="product-card">Product 8</div>
    </div>
</body>
</html>

CSS 样式（使用CSS Grid）

/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
}
 
.product-grid {
    display: grid;
    gap: 20px;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
}
 
.product-card {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 大屏幕设备（桌面电脑） */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
 
/* 中等屏幕设备（平板电脑） */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
/* 小屏幕设备（手机） */
@media (max-width: 767px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

解释

1. HTML 部分：

• 使用一个<div class="product-grid">容器来包裹所有的产品卡片。
• 每个产品卡片都是一个<div class="product-card">元素。

2. CSS 部分：

• 基础样式：

  • 设置body的样式，使其内容居中显示，并设置背景颜色。
  • 为.product-grid容器设置display: grid，并定义网格项之间的间距（gap）和内边距（padding）。
  • 为.product-card设置背景颜色、内边距、文本对齐方式、边框和阴影效果。

• 媒体查询：

  • 使用媒体查询来根据屏幕宽度调整.product-grid的grid-template-columns属性。
  • 当屏幕宽度大于或等于1024px时（桌面电脑），每行展示4个产品卡片（repeat(4, 1fr)）。
  • 当屏幕宽度在768px到1023px之间时（平板电脑），每行展示2个产品卡片（repeat(2, 1fr)）。
  • 当屏幕宽度小于768px时（手机），每行展示1个产品卡片（1fr）。

通过这种方式，你可以创建一个自适应的网格系统，使产品卡片能够根据不同的屏幕大小自动调整布局，从而在各种设备上都能提供一致且良好的用户体验。

小屏幕.png

中屏幕.png

大屏幕.png