npm 包 emcellent 使用教程

简介

emcellent 是一个优秀的 Em 转 Rem 工具，能够让我们在编写网页时不再烦恼于不同分辨率下的字体大小而导致页面排版错乱，它可以帮我们自动处理好字体大小转换问题，简单易用。本文主要介绍使用 emcellent 的详细流程，方便前端工程师能够了解并使用此工具。

安装

使用 npm 包管理器安装 emcellent，命令如下：

npm install emcellent --save

使用

引入 emcellent，我们需要在项目的入口文件中使用它，通常就是在 main.js 或者 index.js 中进行引用。

import emcellent from 'emcellent'

然后调用函数进行转换即可：

emcellent()

当然，你也可以传入参数进行个性化设置：

emcellent({
  baseFontSize: 18,
  decimal: 2,
  unit: 'rem'
})

• baseFontSize: 基础的字体大小，也就是 1rem 对应的像素值，默认为 16。
• decimal: 转换后的小数保留位数，默认为 4。
• unit: 转换后使用的单位，默认为 px。

示例

假设我们在写一个标题，需要在不同分辨率下保持相同大小，我们可以按下面的方式编写样式：

h1 {
  font-size: 24px;
  line-height: 36px;
}

但是，当我们在移动端浏览器上浏览时，由于分辨率不同，可能导致我们的标题大小不能自适应，甚至出现错乱现象。

使用 emcellent 后，我们可以按照设计图中的设计稿直接编写样式：

h1 {
  font-size: 1.5em;
  line-height: 2.3em;
}

然后在项目入口处调用 emcellent 进行转换即可（上面的 1.5em 相当于 24px）。

总结

通过本文介绍，我们学习了如何使用 emcellent 解决前端开发过程中的字体大小问题。同时，我们也了解了 npm 包的基本使用方法，希望这篇文章能够帮助到广大前端工程师学习更多的前端知识，提高开发效率和质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd24