布局
容器
使用 .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> 本身就充当容器,用于定义居中或流式的视口。
参见无类版本。