HTML创建12列小屏幕网格,手册 - Materialize - 网格

创建响应式布局

上面展示的事如何使用网格系统布局。现在，我们将向您展示如何设计你的布局使它适应所有的屏幕尺寸。

屏幕尺寸

手机设备

<= 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