响应式设计 · 断点

什么是断点

在响应式布局范围内，断点可以理解为适配的尺寸，不同的尺寸会使用不同的样式，断点就是适配尺寸的边界点。

移动端优先

Tailwind 默认移动端优先原则，意味着您默认编写的样式都是服务于移动端，然后通过 md: lg: 等断点适配更大屏幕尺寸的设备。

Tailwind 的默认断点

Tailwind 中的每个功能类都可以有条件的应用于不同的断点，可以轻松地应对各类设备。
根据常用的设备分辨率方案，默认内置了 5 个断点 ：

默认 < 640 移动端
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

示例

下面的例子演示了断点的应用， 不同设备下 div 宽度不同 :

<div 
class="w-full md:w-1/2 lg:w-1/3 text-center bg-orange-400">
    断点测试
</div>

断点的应用语法

<dom class="样式 断点:样式 断点:样式 .....">...</dom>

规划自己的断点

您还可以通过配置来规划更适合自己的断点，lesscode 官网的规划如下 :
# 打开 tailwind.config.js 并修改

module.exports = {
    content: [
        "./localhost/**/*.{html,js,php}",
    ],
    theme: {
        screens: {
            md: '750px',
            lg: '1180px',
        },
        extend: {
            container: {
                center: true,
            },
        },
    },
    plugins: [],
}

如上配置，我们只规划了 md 和 ld 断点，意味着我们只适配 移动端 750px 和 1180px 更大的尺寸则采用 1180px 居中。