TailwindCSS 下的响应式设计

前言

我自己在最近的一段时间里,整体是比较喜欢 TailwindCSS 这类样式框架的,它可以非常灵活的定义样式,从而可以十分方便的进行创意类的 UI 设计,实现一些独特的 UI 特性。不过,由于我并非一个专业的前端,也不曾研究过响应式设计。这让我在进行前端开发过程中,吃尽了苦头。

痛定思痛,认真的学习了一下 TailwindCSS 下的响应式设计,为以后的开发做好准备。磨刀不误砍柴工嘛。

正文

设计理念

在进行 TailwindCSS 下的响应式设计时,需要考虑到其整个设计系统的基础 —— Mobile First(移动优先)。

基于移动优先的理念并不新奇,诸如 Bootstrap 之类的框架早已经教会我们移动优先。

Mobile first, responsive design is the goal.

Bootstrap

在这种设计理念上,我们应该做的是先设计移动端的样式,并根据屏幕的不断扩张,变成一个更加丰富的 UI 和界面。

这一点对于做研发的我来说,是一个非常反直觉的事情:在绝大多数场景下,我在开发产品的时候,都是看到的桌面端的样式 & 功能,我下意识的以为,桌面端才是应该首要设计的界面。但无论是 Bootstrap,还是 TailwindCSS,其实都是首要设计移动端的

d2b5ca33bd970f64a6301fa75ae2eb22 7

理念的变化没有跟上,导致我对于 TailwindCSS 的类样式的理解不到位,在设计时会出现错误。

断点(breakpoint)的作用

在进行响应式开发的时候,断点是非常重要的,借助于 CSS 3 提供的 Media Query,我们得以在不同的样式尺寸下应用不同的样式设计。

而在 TailwindCSS 当中,根据最小屏幕宽度(为什么是最小而不是最大?因为默认应用在移动设备上,更大的尺寸使用 Media Query 来控制)默认提供了 5 组不同的断点,分别是 sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px),以及不加任何断点情况下的 default 样式。

对于绝大多数的应用来说,处理好 default(手机)、md(平板)和 lg(PC),就已经足够,对于一些面向更 Geek 的场景(比如开发者),他们使用的设备性能和参数更高,可以再定向配置 xl 和 2xl 的样式。

自定义断点

在实际开发过程中,根据用户的场景的不同,TailwindCSS 的默认断点可能并不能满足你的诉求,这种情况下,你还可以根据自己的需要,修改默认的断点的配置(甚至是将其从移动优先调整为 PC 优先:将 min-width 模式调整为 max-width 即可)。

具体可以参考 TailwindCSS Customize Screen Size

总结

在 Tailiwind CSS 下进行响应式开发时,切记从小到大,而非从大到小,不然会让你调试样式的时候十分痛苦。

延展阅读

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注