在前端开发中，需要处理和调整网站的字体和排版，而这些设计和排版工作中经常使用到比例和尺寸。这时候，就不能避免使用 modular-scale 了。modular-scale 是一个帮助设计师和开发人员处理尺寸和比例的工具，而 modular-scale-css 就是为前端开发人员提供使用 modular-scale 的简便方式。
1. 什么是 modular-scale-css
modular-scale-css 是 modular-scale 的一个封装，它可以用在 CSS 中直接定义比例和尺寸。使用 modular-scale-css 可以快速的调整页面元素的比例和尺寸，并且不需要写繁琐的 CSS 代码。
2. 下载和安装
modular-scale-css 是一个 npm 包，可以使用如下命令安装：
npm install modular-scale-css
3. 使用示例
3.1 设置基准值
modular-scale-css 需要先设置一个基准值来确定整个页面的尺寸。它的基准值是基于 modular-scale 的，可以设置任意的数字或 npm 包内置的基准值。
:root {
--modular-scale: 1.3;
}
在这个例子中，设置了基准值为 1.3，这个值关系到整个页面页面尺寸的变化。
3.2 定义比例和尺寸
在基准值设定之后，就可以在 CSS 中定义比例和尺寸了。modular-scale-css 支持两种方式：定义比例和定义尺寸。比例是相对于基准值的变化，而尺寸则是相对于基准字体的变化。
定义比例
在 CSS 中用 ms 表示一个可选的比例，如下：
h1 {
font-size: ms(3);
}这其实等同于下面这个 CSS 语句：
h1 {
font-size: 4.170080138;
}你可以通过计算可得 3ms 是一个因子为 1.3 的递增数。所以 ms(3) 表示基准值为 1.3，共递增了三次，也就是 1.3 * 1.3 * 1.3 的结果。
定义尺寸
除了比例，还可以定义字体、行高等尺寸。这时候需要用 em 作为单位，如下：
p {
font-size: ms(2) * 1em;
line-height: ms(-2) * 1.2em;
}上述 CSS 中的 ms(-2) 表示逆向寻址，也就是将基准值 1.3 除以一个递增因子，也就是 1.3 / 1.3 / 1.3。这样可以得到一个缩小的值。
4. 总结
modular-scale-css 是一个非常实用的前端开发工具，它可以帮助我们快速的处理各种字体和排版的比例和尺寸。只要按照上述的方法定义好基准值、比例和尺寸，就可以让我们的网页排版更加规范化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555df81e8991b448d2ee0