Tailwind CSS 实现响应式布局

Tailwind CSS 实现响应式布局

CSS3 如何实现响应式

先聊聊纯 CSS 方案是怎么做的：
使用 CSS3 特性:@media
scrren 表示设备屏幕，and 用于并列多个条件

一般来讲每个响应式系统的 ui 规范都要有多个断点:
small：640px 起，横向模式显示状态的手机
medium：768px 起，平板
large：1024px 起，电脑
x large：1280px 起，大型电脑
2x large：1536px 起，更大型电脑

在响应式系统中，依赖断点机制，实现 mobile first，优先考虑移动设备，随着屏幕变大再去使用更大的设备宽度，是比较通用的做法

@media screen and (min-width: 768px) {
  #app {
    font-size: 20px;
  }
}
@media screen and (min-width: 1280px) {
  #app {
    font-size: 30px;
  }
}

Tailwind CSS 如何实现响应式

在 Tailwind 中，不需要写复杂的媒体查询声明代码，通过断点前缀:类名的形式，就能定义元素的响应式

Tailwind 默认断点

• sm:640px
• md:768px
• lg:1024px
• xl:1280px
• 2xl:1536px

sm:bg-red-300 => 应用于大于 640px 宽度的设备样式
如果要定义某段范围内的样式，则使用 ?:max-?:className
如 sm:max-xl:bg-red 即 表示宽度在 640px 到 1280px 之间背景色为红色

    <main className="text-center sm:bg-red-300 md:bg-orange-300 lg:bg-yellow-300 xl:bg-green-300 2xl:bg-blue-300">
      <div>hello tailwind css</div>
    </main>

自定义配置

如果默认的断点不符合需求，那么也可以在 tailwind.config 中设置 theme.screens 来修改默认配置

这种修改不是把新属性去覆盖旧属性，而是新对象去替换 screens 对象
也就是说，如果你仅仅自定义了 sm，那么其他的 4 个默认断点会丢失

当然你也可以添加更大/更小的断点，如 3xl,4xl, 如果要保留旧值，可以引入 defaultTheme，默认断点就储存在这个对象里

配置也支持自定义断点范围，需要传入一个对象，设置对应的 min 和 max 属性即可

import defaultTheme from "tailwindcss/defaultTheme";
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      "3xl": { min: "1537px", max: "2000px" },
    },
  },
};