說一說你不瞭解的Tailwind CSS響應式設計~

導語

響應式相信你們都不陌生，就是使用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>

4. 使用無前綴的實用程序來定位移動設備，並在較大的斷點處覆蓋它們

<!-- 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屏幕等進行分層。

6. 咱們沒必要爲sm斷點或xl斷點指定背景色，您只須要指定實用程序什麼時候應開始生效，而不是什麼時候中止。

<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>

原文地址：https://www.wjcms.net/archives/tailwindcss初體驗之響應式設計