七、响应式表格

7.1 表格响应式策略

/* 策略1：水平滚动 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 600px;
    width: 100%;
}

/* 策略2：堆叠卡片式 */
@media (max-width: 768px) {
    .stack-table,
    .stack-table thead,
    .stack-table tbody,
    .stack-table tr,
    .stack-table td,
    .stack-table th {
        display: block;
    }

    .stack-table thead {
        display: none;
    }

    .stack-table tr {
        border: 1px solid #ddd;
        margin-bottom: 1rem;
        border-radius: 8px;
        overflow: hidden;
    }

    .stack-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        border-bottom: 1px solid #eee;
    }

    .stack-table td:before {
        content: attr(data-label);
        font-weight: bold;
        width: 40%;
    }

    .stack-table td:last-child {
        border-bottom: none;
    }
}

7.2 完整响应式表格示例

<style>
.table-wrapper {
    overflow-x: auto;
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table th,
.responsive-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
    .responsive-table,
    .responsive-table thead,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table th,
    .responsive-table td {
        display: block;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .responsive-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .responsive-table td:before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 1rem;
    }

    .responsive-table td:last-child {
        border-bottom: none;
    }
}
</style>

<div class="table-wrapper">
    <table class="responsive-table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>工资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="姓名">张三</td>
                <td data-label="职位">工程师</td>
                <td data-label="部门">技术部</td>
                <td data-label="工资">8000</td>
            </tr>
        </tbody>
    </table>
</div>

八、响应式表单

8.1 表单布局

/* 单列表单（移动端） */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 多列表单（桌面端） */
@media (min-width: 768px) {
    .form-row {
        display: flex;
        gap: 1rem;
    }

    .form-row .form-group {
        flex: 1;
    }
}

/* 水平表单 */
@media (min-width: 768px) {
    .horizontal-form .form-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .horizontal-form label {
        width: 120px;
        margin-bottom: 0;
        text-align: right;
    }

    .horizontal-form input,
    .horizontal-form select {
        flex: 1;
    }
}

8.2 移动端表单优化

/* 增大点击区域 */
input,
select,
button {
    min-height: 44px;  /* 移动端最小点击区域 */
}

/* 虚拟键盘优化 */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* 设置输入类型，优化键盘 */
<input type="email">      <!-- 邮箱键盘 -->
<input type="tel">        <!-- 数字键盘 -->
<input type="url">        <!-- URL键盘 -->
<input type="number">     <!-- 数字键盘 -->
<input type="search">     <!-- 搜索键盘 -->

/* 焦点状态优化 */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

九、响应式布局模式

9.1 圣杯布局

<style>
.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.holy-grail header,
.holy-grail footer {
    background: #333;
    color: white;
    padding: 1rem;
}

.holy-grail .content {
    display: flex;
    flex: 1;
}

.holy-grail main {
    flex: 1;
    padding: 1rem;
}

.holy-grail .sidebar-left {
    width: 250px;
    padding: 1rem;
    background: #f5f5f5;
}

.holy-grail .sidebar-right {
    width: 250px;
    padding: 1rem;
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .holy-grail .content {
        flex-direction: column;
    }

    .holy-grail .sidebar-left,
    .holy-grail .sidebar-right {
        width: auto;
    }
}
</style>

9.2 瀑布流布局

<style>
.masonry {
    column-count: 1;
    column-gap: 20px;
}

@media (min-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 1200px) {
    .masonry {
        column-count: 3;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}

.masonry-item .content {
    padding: 15px;
}
</style>

<div class="masonry">
    <div class="masonry-item">
        <img src="image1.jpg" alt="图片1">
        <div class="content">
            <h3>标题1</h3>
            <p>内容描述...</p>
        </div>
    </div>
    <!-- 更多卡片 -->
</div>

9.3 卡片式布局

/* 响应式卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 16px;
}

.card-title {
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.card-text {
    color: #666;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .card-grid {
        gap: 16px;
        padding: 12px;
    }

    .card-image {
        height: 160px;
    }
}

来源：
https://ljtgc.cn/category/pc-games.html