基于 tailwindcss 的多端自适应布局方案

近期，我在做一个项目。老板希望我们的产品在不同的设备上都能有良好的用户体验，同时，为了节省人力成本，希望在同一套代码上去针对不同的屏幕尺寸去做样式适配。因为我选择了 tailwindcss 作为 css 框架，所以我就想能不能基于 tailwindcss 去做一套多端自适应的布局方案呢？经过一番研究，我发现，tailwindcss 的响应式断点设置非常灵活，可以满足我们的需求。使用断点工具类，可以避免在写大量的媒体查询 css,使用下来发现还是非常方便的。下面，我就来介绍一下我是如何基于 tailwindcss 去做一套多端自适应的布局方案的。

响应式断点设置

以下是 tailwindcss 默认的 5 个断点：

断点前缀	宽度	css
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

tailwindcss 采用 Mobile First的策略，即不加前缀的工具类都是针对小屏幕的，加了前缀的工具类都是针对大屏幕的。比如，text-center是针对小屏幕的，md:text-center是针对大屏幕的。因为 tailwindcss 的第一个断点屏幕尺寸是 640px,但其实最大的手机屏幕宽度也不过 480px,所以，如果你有一些针对手机端的特殊布局，可以考虑加一个断点：

js复制代码// tailwind.config.js
module.exports = {
    ...,// 其他配置
    theme: {
        screens: {
            xs: '480px',
            ...defaultTheme.screens,
        },
    },

}

针对以上断点，我和设计师讨论后达成一致，针对每个页面，设计师一般至少出 3 套布局设计，分别应用于手机端、平板端、PC 端。我们认为屏幕尺寸小于 480px 为手机端，480px 到 1024px 为平板端，1024px 到 1280px 之间为大 pad 尺寸和小笔记本屏幕的混合区。大于 1280px 为 PC 端。设计师可以选择在任意断点上做布局变化，以细粒度的控制自适应的布局效果。