導語
回應式相信大家都不陌生，就是使用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 >Tailwind CSS text-color測驗</p>
上述一段代碼，意思是：螢屏小于640尺寸為紅色，640-1024尺寸顯示為黃色，1024-1280尺寸顯示為綠色，大于1280尺寸顯示為藍色，
這意味著未加前綴的類對所有螢屏尺寸都有效，而帶前綴的類僅在指定的斷點及以上斷點生效，
幾個小技巧
-
可以使用max-w-sm限定此網頁為移動端，在瀏覽器也只顯示小尺寸，
-
要為移動設備設計樣式，您需要使用實用程式的無前綴版本，而不是帶sm:前綴的版本，不要將其sm:視為“在小螢屏上”的含義，而應將其視為“在小斷點處”，
-
不要sm:用于定位移動設備
<!-- This will only center text on screens 640px and wider, not on small screens -->
<div ></div>
- 使用無前綴的實用程式來定位移動設備，并在較大的斷點處覆寫它們
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div ></div>
5.通常最好先為設計實作移動布局，然后在對sm螢屏有意義的所有更改上進行分層，然后再對md螢屏等進行分層，
- 我們不必為sm斷點或xl斷點指定背景色，您只需要指定實用程式何時應開始生效，而不是何時停止，
<div ></div>
原文地址：https://www.wjcms.net/archives/tailwindcss初體驗之回應式設計
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/222789.html
標籤：PHP