tailwind: Screens/resposive/响应式

tailwind 的响应式布局

典型尺寸

这个问题涉及到了很多设备的屏幕尺寸，以下是一个大致的参考：

• 'sm': '640px'，一般来说，这个尺寸对应的是较大的手机或者小型平板。举例来说，iPhone 6/7/8 Plus的横向分辨率就是这个范围。
• 'md': '768px'，这个尺寸通常适用于平板设备。比如，iPad的横向分辨率就是768px。
• 'lg': '1024px'，这个尺寸多用于小型桌面显示器或者大型平板设备，比如iPad Pro。
• 'xl': '1280px'，这个尺寸通常适用于中型桌面显示器。比如早期的MacBook Pro 13英寸模型的分辨率就是1280px。
• '2xl': '1536px'，这个尺寸通常适用于较大的桌面显示器。

配置1

min/max 值的情况。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}

✨ 配置2 - 推荐这种

单值的情况，一般推荐用这个。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    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) { ... }
    }
  }
}