Question 1

什么是 CSS 断点？

Accepted Answer

CSS 断点是网站布局发生变化的特定视口宽度，通过 @media (min-width: 768px) 等 CSS 媒体查询来定义。

Question 2

Tailwind CSS 的断点是什么？

Accepted Answer

Tailwind CSS 有 6 个默认断点：sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)。

Question 3

Bootstrap 的断点是什么？

Accepted Answer

Bootstrap 5 定义了 6 个断点：xs(小于 576px)、sm(≥576px)、md(≥768px)、lg(≥992px)、xl(≥1200px)、xxl(≥1400px)。

Question 4

什么是移动优先方法？

Accepted Answer

移动优先设计是先为小屏幕编写基础样式，然后使用 min-width 媒体查询应用大屏幕样式。

Question 5

可以自定义断点吗？

Accepted Answer

可以。在 Tailwind 中可以在 tailwind.config.js 中扩展断点。本工具也支持添加自定义断点进行比较。

断点可视化工具

常见问题