全局缩放：

给 html 元素添加 font-auto 类，即可让全局字体实现自动缩放。

PS：如果你的网站样式采用 px 单位编写，则该功能将会对相应元素失效。

尺寸限制：

添加 wrap 类，即可布置一个限制尺寸的框架。

<div class="wrap min">
  <p>我被限制了</p>
</div>

wrap 也提供了多种扩展类，可以使用不同宽度的同时，也可以清除边距。

当然，你也可以直接使用 CSS 变量的方式，直接修改默认的边距和宽度限制。它们分别是 --wrapper-gap 和 --wrapper-width。结合 :root 选择器就可以完成替换：

:root {
    --wrapper-gap: 1.5em;
    --wrapper-width: 1400px;
}

保留间距：

框架默认保留 1.25em 的左右间距，你也可以修改成细的（0.75em）、粗的（1.5em）或者清除掉。

PS：如果你的页面包含栅格系统，并使用了比容器更大的间距，则会出现页面溢出的现象。可以通过 CSS 的 overflow: hidden 方法清除间距。或者干脆使得页面间距和容器间距相同即可。

清除浮动：

部分情况下使用 float 布局方案会导致父元素塌陷，给元素添加 .clearfix 类即可清除浮动，改善塌陷的问题。

<div class="clearfix">
  <p class="float-left">此元素的浮动可以被清除掉，防止布局坍塌</p>
</div>

设置浮动：

给元素添加 .float-left 和 .float-right 类，迅速设置左/右浮动，浮动可以清除元素与元素之间的微小间距。

<div class="clearfix">
  <p class="float-right">我浮动到右边了</p>
</div>

文字对齐：

给元素添加 .text-left .text-right 类，迅速设置左/右对齐方式。

<p class="text-center">居中对齐的文字</p>
<p class="text-right">靠右对齐的文字</p>
<p class="text-justify">两侧对齐的文字，要这段文字出现换行才有效果呢</p>