本文介绍了如何使用网格系统创建响应式布局，以适应不同屏幕尺寸，如手机、平板和桌面设备。通过添加类前缀.s、.m、.l，分别定义不同设备上的列数和容器宽度，实现灵活的布局调整。例如，.cols12m6表示在手机上占据全宽，在平板上占据一半宽度。示例还展示了响应式侧边导航布局的实现，随着浏览器宽度变化，布局会自动调整。
创建响应式布局
上面展示的事如何使用网格系统布局。现在，我们将向您展示如何设计你的布局使它适应所有的屏幕尺寸。
屏幕尺寸
手机设备
<= 600px
平板设备
<= 992px
桌面设备
> 992px
类前缀
.s
.m
.l
Container 的宽度
85%
85%
70%
列数
12
12
12
增加响应式
在之前的例子中，我们只定义了小屏幕大小的类，通过使用"col s12"。如果我们只是要一个固定的布局这是可以的，因为这个规则是向上兼容的。 这仅仅是s12，现在是"col s12 m12 l12"总合应用。但通过明确定义的大小，我们可以使我们的网站更敏感。
我总是占据所有的宽度 (col s12)
我占据所有的宽度在手机上 (col s12 m6)
我总是占据所有的宽度 (col s12)
我占据所有的宽度在手机上 (col s12 m6)
响应式侧边导航布局
在下面的这个例子中，我们使用和上面相同的布局，但是我们使它支持响应式，让它适应所有屏幕尺寸。 尝试改变浏览器宽度大小，看看下面这个布局的变化。
更多响应式网格布局的例子
s12
s12 m4 l2
s12 m4 l8
s12 m4 l2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12
s12 m4
s12 m4
s12 m4
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
