布局

容器

使用 .container 获得居中的视口,或使用 .container-fluid 实现全宽布局。

Pico 内置六个默认断点,可以通过 Sass 进行定制。

设备 断点 视口
超小 <576px 100%
≥576px 510px
≥768px 700px
≥1024px 950px
超大 ≥1280px 1200px
特大 ≥1536px 1450px

.container.container-fluid 在无类版本中不可用(替代方案参见语义化容器)。

固定宽度

.container 提供一个固定宽度的居中容器。

<body>
  <main class="container">
    ...
  </main>
</body>

流式宽度

.container-fluid 提供一个全宽的流式容器。

<body>
  <main class="container-fluid">
    ...
  </main>
</body>

语义化容器

在无类版本中,<body> 内的 <header><main><footer> 本身就充当容器,用于定义居中或流式的视口。

参见无类版本