Tailwind CSS 响应式断点:完整布局用法
Tailwind 响应式布局的核心是移动端优先 + 断点前缀,所有布局工具类(flex/grid/container等)都能直接加断点前缀,快速实现手机、平板、电脑的自适应布局。
下面从核心规则 → 基础布局工具 → 高频布局场景 → 完整实战页面,全覆盖最实用的布局用法。
一、布局核心前提(必记)
- 移动端优先
不写前缀 → 手机(<640px)生效;
加
sm/md/lg/xl/2xl前缀 → ≥ 对应宽度 生效。 - 断点优先级:
2xl>xl>lg>md>sm> 无前缀 - 所有布局类通用:
flex/grid/width/margin/hidden等都能加断点。
二、5大核心布局工具 + 响应式用法
这是做布局必用的5个工具,配合断点就能搞定90%的页面布局。
1. 响应式容器(页面居中 wrapper)
container 是 Tailwind 内置的自适应居中容器,自动匹配断点宽度,搭配 mx-auto 水平居中。
1<!-- 最外层页面容器:手机满宽,大屏自动居中+内边距 --> 2<div class="container mx-auto px-4 sm:px-6 lg:px-8"> 3 所有页面内容放在这里 4</div>
px-4:手机左右内边距sm:px-6:平板加大内边距lg:px-8:电脑再加大内边距
2. 响应式弹性布局(Flex → 导航/两栏/垂直水平排列)
最常用布局:移动端垂直堆叠,平板/电脑水平排列。
父元素加 flex,配合断点改方向/对齐/宽度。
示例1:响应式导航栏
1<!-- 手机:垂直排列;≥md(平板):水平排列 --> 2<nav class="flex flex-col md:flex-row justify-between items-center p-4"> 3 <div class="logo">Logo</div> 4 <!-- 手机隐藏导航,平板显示 --> 5 <ul class="hidden md:flex gap-6"> 6 <li>首页</li> 7 <li>产品</li> 8 <li>关于</li> 9 </ul> 10 <!-- 手机显示菜单按钮,平板隐藏 --> 11 <button class="block md:hidden">菜单</button> 12</nav>
示例2:响应式两栏布局
1<!-- 手机:上下堆叠;≥md:左右分栏(1:2宽度) --> 2<div class="flex flex-col md:flex-row gap-4"> 3 <div class="w-full md:w-1/3 bg-gray-100 p-4">侧边栏</div> 4 <div class="w-full md:w-2/3 bg-gray-200 p-4">主内容</div> 5</div>
3. 响应式网格布局(Grid → 卡片/多列布局)
卡片、商品列表、相册标配:自动适配列数,手机1列,平板2列,电脑3/4列。
1<!-- 2 手机:1列 3 ≥sm:2列 4 ≥md:3列 5 ≥lg:4列 6--> 7<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4"> 8 <div class="bg-white p-6 rounded shadow">卡片1</div> 9 <div class="bg-white p-6 rounded shadow">卡片2</div> 10 <div class="bg-white p-6 rounded shadow">卡片3</div> 11 <div class="bg-white p-6 rounded shadow">卡片4</div> 12</div>
4. 响应式显示/隐藏(设备专属元素)
控制元素在不同设备显示/隐藏,是导航、弹窗、菜单的核心用法:
| 类名 | 作用 |
|---|---|
hidden md:block | 手机隐藏,≥平板显示 |
block md:hidden | 手机显示,≥平板隐藏 |
hidden lg:flex | 手机/平板隐藏,≥电脑显示 |
5. 响应式间距/尺寸
手机用小间距,大屏用大间距;手机满宽,大屏固定宽度:
1<!-- 间距:手机p-2,≥md p-6;宽度:手机满宽,≥md 半宽 --> 2<div class="w-full md:w-1/2 p-2 md:p-6 bg-blue-100"> 3 响应式宽高+间距 4</div>
三、完整实战:响应式页面布局(直接复制可用)
包含头部、导航、主内容(两栏)、卡片网格、页脚,覆盖所有主流布局场景:
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script src="https://cdn.tailwindcss.com"></title> 7</head> 8<body class="bg-gray-50"> 9 <!-- 1. 页面容器 --> 10 <div class="container mx-auto px-4 sm:px-6 lg:px-8"> 11 12 <!-- 2. 响应式导航栏 --> 13 <header class="py-4 border-b"> 14 <div class="flex flex-col md:flex-row justify-between items-center"> 15 <h1 class="text-xl font-bold mb-4 md:mb-0">我的网站</h1> 16 <ul class="hidden md:flex gap-6 text-gray-600"> 17 <li>首页</li><li>产品</li><li>博客</li><li>联系我们</li> 18 </ul> 19 <button class="md:hidden bg-gray-200 px-3 py-1 rounded">菜单</button> 20 </div> 21 </header> 22 23 <!-- 3. 响应式两栏主内容 --> 24 <main class="py-8 flex flex-col md:flex-row gap-6"> 25 <!-- 侧边栏 --> 26 <aside class="w-full md:w-1/4 bg-white p-4 rounded shadow"> 27 <h3 class="font-bold mb-4">侧边栏</h3> 28 <ul class="space-y-2 text-sm text-gray-600"> 29 <li>分类1</li><li>分类2</li><li>分类3</li> 30 </ul> 31 </aside> 32 <!-- 内容区 --> 33 <div class="w-full md:w-3/4"> 34 <h2 class="text-lg font-bold mb-4">热门产品</h2> 35 <!-- 4. 响应式卡片网格 --> 36 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> 37 <div class="bg-white p-4 rounded shadow">产品卡片1</div> 38 <div class="bg-white p-4 rounded shadow">产品卡片2</div> 39 <div class="bg-white p-4 rounded shadow">产品卡片3</div> 40 </div> 41 </div> 42 </main> 43 44 <!-- 5. 页脚 --> 45 <footer class="py-6 border-t text-center text-gray-500 text-sm"> 46 © 2025 我的网站 - 响应式布局示例 47 </footer> 48 </div> 49</body> 50</html>
四、进阶:自定义断点(适配特殊需求)
如果默认断点不满足需求,可在 tailwind.config.js 自定义:
1/** @type {import('tailwindcss').Config} */ 2module.exports = { 3 theme: { 4 screens: { 5 'xs': '360px', // 新增:超小屏手机 6 'sm': '640px', // 默认 7 'md': '768px', 8 'lg': '1024px', 9 'xl': '1280px', 10 '2xl': '1536px', 11 } 12 } 13}
自定义后直接用:xs:text-sm(≥360px生效)。
总结
- 核心逻辑:移动端优先,断点前缀控制
≥对应宽度的样式 - 万能布局组合:
- 整体居中 →
container mx-auto - 导航/分栏 →
flex flex-col md:flex-row - 卡片/多列 →
grid grid-cols-1 sm:grid-cols-2 - 设备显隐 →
hidden md:block/block md:hidden
- 整体居中 →
- 实战:所有布局类都能叠加断点,无需写CSS,直接复用类名即可完成响应式。
评论 0
加载评论中...
