如何使用顺风CSS（响应性）将桌面优先的设计代码更改为移动优先

Question

我用 Html 和 tailwind css 开发了一个网站，现在我需要使网站响应式。我刚刚发现 Tailwind 使用移动优先的断点系统，同时我使用桌面优先的方法开发了我的断点系统。 现在我很困惑如何使用 tailwind css 将设计更改为移动设计，以便我可以使网站响应。

我尝试更改可用样式以适应移动屏幕尺寸，但它不起作用，而是分散了整个内容。

Answer 1

正如您所说，Tailwind 默认使用移动优先的方法。这些是 Tailwind 中默认定义的断点：

screens: {
  '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) { ... }
}

例如，如果将这些类赋予元素

"m-0 md:m-4"

，则仅当屏幕宽度大于 768px 时，该元素才会有边距。您正在为较小的屏幕设置一般规则，并为较大的屏幕设置特定规则（这就是它被认为是移动优先的原因）。

您可以通过稍微不同的方式覆盖

screens

配置来更改为桌面优先行为。将以下内容添加到您的

tailwind.config.js

：

module.exports = {
  /* ... other config... */
  theme: {
    /* ... other theme rules ... */
    screens: {
      '2xl': {'max': '1535px'}, // => @media (max-width: 1535px) { ... }
      'xl': {'max': '1279px'}, // => @media (max-width: 1279px) { ... }
      'lg': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
      'md': {'max': '767px'}, // => @media (max-width: 767px) { ... }
      'sm': {'max': '639px'}, // => @media (max-width: 639px) { ... }
    }
  }
}

重要提示：

max-width

断点必须按降序列出，以便它们按预期相互覆盖。 （请参阅文档此处）

请注意，我们现在使用最大宽度而不是最小宽度。现在，如果屏幕宽度在 767px 以下，则具有

"m-0 md:m-4"

类的元素将仅具有边距。 如果您已经为更大的屏幕设计了您的网站样式，我建议您将上述配置添加到您的

tailwind.config.js

（您可以根据需要添加/删除/编辑断点），并开始针对特定的情况使用修饰符（例如

md:

）您只想应用于较小屏幕的样式。