TPower Design

Appearance

Return to top
On this page

响应式

每个实用程序类都可以在不同的断点有条件地应用，这使得构建复杂的响应式接口变得轻而易举，而无需离开 HTML。

首先，确保已将视口元标记添加到文档的 中：<head>

html
<meta name="viewport" content="width=device-width, initial-scale=1">

然后，要添加一个实用程序，但仅使其在某个断点生效，您需要做的就是在实用程序前面加上断点名称，然后加上字符：

html
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="screen-xs-w-16 screen-md:w-32 screen-lg:w-48" src="...">
断点前缀最小宽度属性Properties
screen-xs480px@media (min-width: 480px)
screen-sm640px@media (min-width: 640px)
screen-md768px@media (min-width: 768px)
screen-lg1024px@media (min-width: 1024px)
screen-xl1280px@media (min-width: 1280px)
screen-xxl1536px@media (min-width: 1536px)
screen-xxxl1920px@media (min-width: 1920px)

使用自定义断点

js
module.exports = {
  theme: {
    screens: {
      'screen-xs': '480px',
      // => @media (min-width: 480px) { ... }

      'screen-sm': '640px',
      // => @media (min-width: 640px) { ... }

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

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

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

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

     'screen-xxxl': '1920px',
      // => @media (min-width: 1920px) {... }
    },
  }
}