Tailwind CSS 实现自适应网页

更新日期: 2022-06-10 阅读次数: 5685 字数: 260 分类: CSS

Mobile First

其实跟不用 Tailwind 时,纯手写 CSS 的原则是一样的,那就是:

Mobile First

即,先写手机端的样式,然后逐一写更宽屏幕的样式。

而在 Tailwind CSS 中,Mobile First 就是先写不加 breakpoint (sm, md, lg ...) 前缀的 class。

例如:

<img class="w-16 sm:w-20 md:w-32 lg:w-48" src="...">

sm breakpoint 的正确理解

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.

容易引起误解的地方是,那些以 sm 为前缀的 class,总被认为是针对手机屏幕的样式。 实际上 sm 是针对 640px 以上宽度屏幕的情况。

sm 640px @media (min-width: 640px) { ... }

所以,正确理解是,

  • 不加前缀的才是针对所有尺寸屏幕
  • 加了 sm 的,是针对稍大一点的屏幕,或比 small breakpoint 宽的情况

在线实现效果演示

https://www.sunzhongwei.com/tools2/combine-images

参考

tags: Tailwind CSS

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式