关于php:说一说你不了解的Tailwind-CSS响应式设计

53次阅读

共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。

导语

响应式置信大家都不生疏,就是应用 css 的媒体查问设计,进行不同尺寸,显示不同成果,然而 Tailwind CSS 的响应式设计应用起来会更加爽,更加快捷不便,到底怎么搞呢?咱们一起来探讨一下。

简介

Tailwind 中的每个实用程序类都能够有条件地利用于不同的断点,这使得轻松构建简单的响应式接口变得轻松,而无需来到 HTML。
默认状况下,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) {/* ... */}
},

简略应用

应用起来当然非常简单,省去了繁冗的过程,间接对应尺寸显示的款式即可,不加限度则全尺寸显示一样的成果。

默认状况下,Tailwind 应用挪动优先断点零碎,相似于您可能在 Bootstrap 或 Foundation 中应用的零碎。

应用:只有应用前缀加上:再加上对应类名即可。
例如:md:text-gray-700

<p class="text-red-600 sm:text-yellow-300 lg:text-green-600 xl:text-blue-300">Tailwind CSS text-color 测试 </p>

上述一段代码,意思是:屏幕小于 640 尺寸为红色,640-1024 尺寸显示为黄色,1024-1280 尺寸显示为绿色,大于 1280 尺寸显示为蓝色。

这意味着未加前缀的类对所有屏幕尺寸都无效,而带前缀的类仅在指定的断点及以上断点失效。

几个小技巧

  1. 能够应用 max-w-sm 限定此网页为挪动端,在浏览器也只显示小尺寸。
  2. 要为挪动设备设计款式,您须要应用实用程序的无前缀版本,而不是带 sm: 前缀的版本。不要将其 sm: 视为“在小屏幕上”的含意,而应将其视为“在小断点处”。
  3. 不要 sm: 用于定位挪动设施
<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>
  1. 应用无前缀的实用程序来定位挪动设施,并在较大的断点处笼罩它们
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

5. 通常最好先为设计实现挪动布局,而后在对 sm 屏幕有意义的所有更改上进行分层,而后再对 md 屏幕等进行分层。

  1. 咱们不用为 sm 断点或 xl 断点指定背景色,您只须要指定实用程序何时应开始失效,而不是何时进行。
<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>

原文地址:https://www.wjcms.net/archive…

正文完
 0