Less实现响应式多卡片布局完整代码案例

一、文档概述

在前端页面开发中，卡片组件是资讯、商品、功能模块最常用的展示形式，原生CSS编写多卡片响应式布局会存在大量重复样式、媒体查询冗余、变量难以统一维护等问题。Less作为CSS预处理器，支持变量、混合器、嵌套、函数等特性，能够大幅简化样式代码，提升维护效率。本文通过一套完整可运行的多卡片布局案例，讲解Less核心语法在响应式场景下的落地使用，适配移动端、平板、桌面多端屏幕。

二、Less核心优势说明

变量统一管理：颜色、间距、圆角、字号等全局样式参数集中定义，修改一处全局生效；
混合器复用样式：提取卡片阴影、过渡、弹性布局等通用样式，避免代码重复；
嵌套简化层级：HTML结构与样式层级对应，可读性更强；
媒体查询内嵌：响应式规则直接写在对应选择器内部，不用分离代码，逻辑更清晰；
运算简化尺寸计算：支持数值加减乘除运算，快速适配多规格尺寸。

三、完整代码演示

3.1 HTML结构

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Less响应式卡片布局</title>
  <!-- 编译后的css文件 -->
  <link rel="stylesheet" href="card.css">
</head>
<body>
  <div class="card-wrap">
    <div class="card-item">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">技术实战卡片一</h3>
        <p class="card-desc">基于Less预处理器搭建多端适配卡片组件，简化样式开发流程。</p>
        <div class="card-btn">查看详情</div>
      </div>
    </div>
    <div class="card-item">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">技术实战卡片二</h3>
        <p class="card-desc">内置弹性布局与媒体查询，自动适配手机、平板、电脑屏幕。</p>
        <div class="card-btn">查看详情</div>
      </div>
    </div>
    <div class="card-item">
      <div class="card-img"></div>
      <div class="card-content">
        <h3 class="card-title">技术实战卡片三</h3>
        <p class="card-desc">统一变量管理主题色，一键切换页面整体视觉风格。</p>
        <div class="card-btn">查看详情</div>
      </div>
    </div>
  </div>
</body>
</html>

3.2 Less源代码（card.less）

less 复制代码

// 全局样式变量
@primary: #2563eb;
@secondary: #64748b;
@light-bg: #f8fafc;
@white: #ffffff;
@shadow: 0 2px 12px rgba(0,0,0,0.08);
@radius: 10px;
@space-sm: 8px;
@space-md: 16px;
@space-lg: 24px;
@mobile: 768px;
@tablet: 1024px;

// 通用混合器-卡片阴影过渡
.card-shadow() {
  box-shadow: @shadow;
  transition: all 0.3s ease;
  &:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-4px);
  }
}

// 通用混合器-弹性居中
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 页面基础重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: @light-bg;
  padding: @space-lg;
}

// 卡片外层容器
.card-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: @space-lg;
  max-width: 1200px;
  margin: 0 auto;

  // 平板适配
  @media (max-width: @tablet) {
    grid-template-columns: repeat(2, 1fr);
    gap: @space-md;
  }
  // 移动端适配
  @media (max-width: @mobile) {
    grid-template-columns: 1fr;
  }
}

// 单张卡片样式
.card-item {
  background: @white;
  border-radius: @radius;
  .card-shadow();
  overflow: hidden;

  .card-img {
    height: 160px;
    background: @primary;
    .flex-center();
    color: @white;
    font-size: 20px;
  }

  .card-content {
    padding: @space-md;

    .card-title {
      font-size: 18px;
      color: #1e293b;
      margin-bottom: @space-sm;
    }
    .card-desc {
      color: @secondary;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: @space-md;
    }
    .card-btn {
      width: 100%;
      padding: 10px 0;
      background: @primary;
      color: @white;
      text-align: center;
      border-radius: @radius;
      cursor: pointer;
      transition: background 0.3s;
      &:hover {
        background: #1d4ed8;
      }
    }
  }
}

3.3 Less编译说明

上述less文件需编译为标准CSS后引入页面，常用编译方式：

编辑器插件：VS Code Easy Less，保存自动生成css；
构建工具：Webpack less-loader、Vite内置Less编译；
命令行：npm less全局工具实时监听编译。

四、代码关键点解析

变量管理：所有颜色、断点、间距统一提取至顶部，修改主题无需遍历全部样式；
混合器复用 ：.card-shadow()、.flex-center()封装重复逻辑，大幅精简代码量；
嵌套语法：卡片内部图片、标题、按钮直接层级嵌套，结构清晰；
响应式媒体查询内嵌：媒体规则写在对应容器内部，布局逻辑集中，便于维护；
hover交互过渡：统一添加缓动动画，卡片悬浮上浮效果提升页面体验。

五、运行效果说明

桌面端：一行3张卡片，均匀等分宽度；
平板（768px-1024px）：一行2张卡片，缩小间距；
手机（小于768px）：单列垂直排列，铺满屏幕宽度；
鼠标悬浮卡片产生上浮与加深阴影，按钮变色，交互流畅。

海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】