Spectre 模态尺寸

Spectre是一个响应式现代CSS框架，其中包含许多方便的CSS组件，模态是其中一个特性。模态窗口的大小对于用户体验至关重要，因此Spectre提供了几种模态尺寸。本文将介绍Spectre的模态尺寸及其用法。

1. 尺寸

Spectre提供了4种模态尺寸：mini、small、large和full。它们分别适用于不同的应用场景。

| 尺寸名称 | 宽度 | 高度 | 适用场景 | | -------- | ---- | ---- | -------- | | mini | 360px | 根据内容自适应 | 较小内容的展示 | | small | 640px | 根据内容自适应 | 中等大小内容的展示 | | large | 960px | 根据内容自适应 | 较大内容的展示 | | full | 100% | 100% | 宽高自适应，全屏展示 |

2. 用法

使用Spectre的模态尺寸非常简单，只需在模态对话框的父元素上添加对应的class即可。

<!-- mini尺寸 -->
<div class="modal mini-modal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <!-- 模态内容 -->
  </div>
</div>

<!-- small尺寸 -->
<div class="modal small-modal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <!-- 模态内容 -->
  </div>
</div>

<!-- large尺寸 -->
<div class="modal large-modal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <!-- 模态内容 -->
  </div>
</div>

<!-- full尺寸 -->
<div class="modal full-modal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <!-- 模态内容 -->
  </div>
</div>

需要注意的是，这些class并不是Spectre默认就提供的，需要自己添加。可以参考以下CSS代码进行自定义：

/* mini尺寸 */
.mini-modal .modal-container {
  max-width: 360px;
}

/* small尺寸 */
.small-modal .modal-container {
  max-width: 640px;
}

/* large尺寸 */
.large-modal .modal-container {
  max-width: 960px;
}

/* full尺寸 */
.full-modal .modal-container {
  width: 100%;
  height: 100%;
  max-width: none;
}

3. 总结

本文介绍了Spectre的模态尺寸及其用法。使用Spectre提供的四种尺寸，可以让你的模态窗口在不同设备上呈现不同的大小，从而获得更好的用户体验。