Tailwind 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

参考

• https://tailwindcss.com/docs/responsive-design

微信关注我哦 👍

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

tags: Tailwind CSS