type
status
date
slug
summary
tags
category
icon
password
1. 前言
基础篇:
进阶篇:
本篇将会介绍 Tailwind CSS 的响应式开发,如何用一套代码实现多终端的样式切换。
2. 媒体查询
在以往,我们使用 CSS3 进行开发时会通过媒体查询来实现。比如有代码如下:
这是一个简单的 Demo,当用户调整浏览器宽度时就会更新宽度显示,而且在不同的宽度下背景颜色发生变化。
2.1 @media
样式代码是这样的:
上面用到了 CSS3 的一个特性:
@media
,screen
表示设备类型为屏幕,通过 and
关键字来并列多个配置。min-width
表示最小宽度,如果按照一把直尺的刻度去理解,最小宽度就是一条线段的左侧较小值,往右,宽度大于这个值时就会应用对应的样式声明。2.2 断点
上面的多个媒体查询定义决定了响应式的不同断点,这些断点被称为 breakpoints,这是每一个具备响应式系统的 UI 规范都要考虑的。上面的 5 个断点对应如下:
- small:640px 起,横向模式显示状态的手机(640px 到下一个断点显示为红色)
- medium:768px 起,平板(768px 到下一个断点显示为橙色)
- large:1024px 起,电脑(1024px 到下一个断点显示为蛋心色)
- x large:1280px 起,大型电脑(1280px 到下一个断点显示为绿色)
- 2x large:1536px 起,更大型电脑(1536px 到下一个断点显示为蓝色)
2.3 mobile first
mobile first 是一个比较通用的概念——优先考虑移动设备,随着屏幕变大再去适应更大的设备宽度。这主要依靠上面所说的断点机制,下面来看在 Tailwind CSS 中如何使用响应式。
3. Tailwind CSS 中的响应式系统
在 Tailwind CSS 中不需要像上面那样写复杂的媒体查询声明代码了,而是通过提前预设好的 CSS 类名来定义元素的样式。
3.1 断点
Tailwind CSS 的断点和 2.2 中提到的断点一样,与类名的对应关系如下:
3.2 断点前缀:类名
通过
断点前缀:类名
的形式就能定义元素的响应式样式,下面是一个简单的使用案例:以 Next.js 中的 React 为例:
sm:bg-red-300
表示在 640px 以上时为红色
md:bg-orange-300
表示 768px 以上时为橙色
- …
其他依次类推,
sm
、md
等都是断点前缀,冒号后面是想要定义的样式类名。最终效果如下所示:
需要注意的是,没有加上断点前缀的类名默认是作用于所有设备大小的,比如上面代码中的
text-center
,可以看到在任何大小下都是文本居中对齐的。3.3 定义范围
如果我只想在
sm
到 lg
的范围内应用背景颜色怎么办?显然只写 sm:bg-red-300
是不行的,因为它表示的是大于 640px 宽度都会应用到红色。解决办法是使用
*:max-*
(*
表示断点前缀)为它定义一段范围:sm:max-lg:bg-red-300
表示在sm
到lg
这段范围内(640px~1024px)应用红色
4. 自定义配置
同样在 tailwind.config.ts 中来配置各种自定义的规则,对于响应式的部分则在
theme.screens
中去定义。4.1 覆盖默认值
默认情况下断点前缀的配置如下所示:
覆盖默认值的方法很简单,直接在
theme.screens
中替换掉原来的值即可,例如:注意:默认值有
sm
、md
、lg
、xl
、2xl
等等,因此上面只写了 sm
、md
、lg
三种,实际上能应用的也就只有这三种。因此,这不是覆盖原来的某个断点,而是直接覆盖了 theme.screens
对象的所有值。4.2 覆盖原来值
如果只是想覆盖掉某一个断点,只需要在
theme.extend.screens
中修改,比如我想覆盖 sm
断点:这样,
sm
的值就从 640px 变为 576px,因此,从 576px 开始,背景颜色就是红色了:4.3 添加更大的断点
在
theme.extend.screens
中也可以添加更大范围的断点:给
main
添加 3xl
的断点:效果如下:
4.4 添加更小的断点
虽然更大的断点可以通过
theme.extend.screens
来实现,但是更小的却不可以这么做,原因在于 extend
是向原来的内容进行追加,所以是在最后一位,而 tailwind 需要它们按照从小到大的顺序排序。在
tailwindcss
模块中有一个 defaultTheme
对象,这里存放着默认断点值,只要将默认值和自定义的更小范围断点结合在一起就可以实现了:之后就可以使用
xs
了:xs:bg-purple-300
表示 475px 起背景颜色为紫色
效果如下:
4.5 定义断点范围
在 3.3 节通过
*:max-*
的方式实现了断点范围的控制,在配置文件中还提供了一种更加快捷的方案:默认情况下的断点范围较大,比如
sm
表示 640px 起,这样一旦 md
等断点都没有去设置就会都应用 sm
的样式了。像上面这样的配置就控制了断点的范围使之更加符合响应式的本质。有下面代码:
只有在屏幕宽度处于 640px ~ 767px 的范围下,背景颜色才表现为红色。
5. 总结
这篇文章主要讲解了传统响应式和 TailwindCSS 中的响应式,有了 Tailwind 就不用再去写媒体查询了,这对于开发者来说是一个喜讯。在开发响应式方面最值得关注的就是断点,控制好断点也就控制好了响应式。除了上述提到的配置特性,还有自定义名称、自定义多个范围、自定义查询等等,这类特性其实并不是开发必需的,只属于灵活性的范畴,如果需要可以自行查阅文档。
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/dont-know-tailwindcss-6
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章