Less实现响应式多卡片布局完整代码案例
一、文档概述
在前端页面开发中，卡片组件是资讯、商品、功能模块最常用的展示形式，原生CSS编写多卡片响应式布局会存在大量重复样式、媒体查询冗余、变量难以统一维护等问题。Less作为CSS预处理器，支持变量、混合器、嵌套、函数等特性，能够大幅简化样式代码，提升维护效率。本文通过一套完整可运行的多卡片布局案例，讲解Less核心语法在响应式场景下的落地使用，适配移动端、平板、桌面多端屏幕。
二、Less核心优势说明
- 变量统一管理：颜色、间距、圆角、字号等全局样式参数集中定义，修改一处全局生效；
- 混合器复用样式：提取卡片阴影、过渡、弹性布局等通用样式，避免代码重复；
- 嵌套简化层级：HTML结构与样式层级对应，可读性更强；
- 媒体查询内嵌：响应式规则直接写在对应选择器内部，不用分离代码，逻辑更清晰；
- 运算简化尺寸计算：支持数值加减乘除运算，快速适配多规格尺寸。
三、完整代码演示
3.1 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）
// 全局样式变量
@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）：单列垂直排列，铺满屏幕宽度；
- 鼠标悬浮卡片产生上浮与加深阴影，按钮变色，交互流畅。
海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】
