布局容器

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

如果需要一个响应不同可视窗口宽度的布局容器,可以使用 tailwind 提供的 container 这个类。现在页面上白色背景的这个容器会占用它的父容器的所有宽度。 在这个容器上面添加一个 container。这个类会设置容器的宽度或者最大宽度。

调整一下浏览器窗口的尺寸,观察一下这个白色背景容器的宽度的变化,你会发现,它会随着浏览器窗口宽度的变化发生一些改变。

鼠标放在这个 container 类的上面,你会发现,它默认会把元素的宽度设置成 100%,然后又设置了一些媒体查询,比如窗口最小宽度是 640px 的时候,元素的最大宽度就会变成 640px,也就是当窗口宽度到达 640 像素的时候,元素的宽度就会发生变化。

这个 640 像素是 tailwind 框架设置的一个断点,在框架里会用 sm 表示它,表示 small,指的是小尺寸的设备。

下面这个媒体查询选择的是最小宽度 768px ,这种情况下,元素的最大宽度会设置成 768 像素。 这个 768 像素也是一个断点,在框架里用 md 表示,表示 medium ,指的是中等尺寸的设备,或者叫中等尺寸一的窗口宽度。

min-width 1024 像素,这个断点的名字叫 lg,表示 large, min-width 1280 像素,这个断点的名字是 xl ,extra large 表示超大号。 min-width 1536 像素,这个断点的名字是 2xl,指的是特大号。

让这个容器居中,可以把左右外边距设置成 auto,在元素上面添加一个 mx-auto 。

布局容器《 Tailwind 样式框架:布局 》

统计

13299
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点