响应式设计
就是会根据屏幕的大小调整页面。
举例:
<div class="grid grid-flow-row md:grid-flow-col">
<div class="text-4xl ring-1">1</div>
<div class="text-4xl ring-1">2</div>
<div class="text-4xl ring-1">3</div>
<div class="text-4xl ring-1">4</div>
</div>
<div class="w-full text-4xl ring-1">内容</div>
grid:grid布局。
grid-flow-row:自动放置,行方向。
md:grid-flow-col:宽度为md以上时,自动放置,列方向。
text-4xl:文字大小。
ring-1:轮廓线。
w-full:满宽。
效果:
内置的五个前缀:
何为移动端优先?
就是优先考虑小屏幕,默认最小。
每当宽度大于某个值了,就生效那个断点。
案例当中,行排列是最小的,列排列次之。故:
grid-flow-row:行排列,不加前缀,默认情况。
md:grid-flow-col:列排列,加前缀,屏幕大于768才会触发。
如何自定义?
比如,只有在640到768的范围内,才会显示出来。
block:display为block。
hidden:display为none。
在配置中弄:
theme: {
screens: {
"justsm": {
'min': '640px', 'max': '767px'}
}
}
然后使用它:
<div class="hidden justsm:block ">你好,世界!</div>
hidden:就是hidden。
justsm:block:只有在640到768的范围内,才会block。
效果: