当我们写前端 HTML、CSS 的过程中，有时会发现不同浏览器对于样式有不同的解析方式，导致页面出现兼容性问题。这时，我们可以使用 normalize.css 来解决这一问题。而 em-normalize 则是在此基础上，引入了 em 单位的使用，使得页面更加符合易读易理解的目的。
本文将介绍 em-normalize 的安装和使用方法。
em-normalize 介绍
em-normalize 是基于 normalize.css 修改的一种样式重置工具，它使用了 em 单位，使得页面在不同设备上的显示效果保持一致，同时降低了代码开发者在样式编写过程中产生的困扰。它的好处在于，由于使用了相对单位 em，我们可以保证在不同屏幕上展示了同样大小的元素。这对于网页设计和响应式设计非常重要。
安装
em-normalize 可以通过 npm 包管理器来安装，只需在终端中，进入项目文件夹，并执行以下命令：
npm install em-normalize
使用方法
在安装了 em-normalize 后，我们可以将其作为项目的通用样式文件引入，来使用它提供的重置样式。具体可以在 HTML 文件的 head 标签中，添加如下链接：
<link rel="stylesheet" href="node_modules/em-normalize/dist/em-normalize.css">
如果你使用 webpack 等常用构建工具，则可以直接在 JS 文件中引入：
import 'em-normalize';
以上两种方法都需要先安装 normalize.css，我们可以通过以下方式安装：
npm install normalize.css
在使用 em-normalize 时，需要将页面中指定元素的 CSS 单位修改为 em 单位，这样才能发挥出 em-normalize 的效果。比如，若要指定一个元素的宽度为 600 像素，可以这样写：
width: 37.5em; /* 600px ÷ 16px 这里 font-size 设置成了 16px */
示例代码
下面是一个示例，我们创建一个新的样式表 styles.css，并在其中添加以下代码：
-- -------------------- ---- ------- -- -- ------------ ----- -- ------- --------------- -- -- ---- -------- -- ---- - ---------- ------ -- --- ---- -- - -- ------- --- ----- -- ---------- - ------ ------- -- ----- - ---- -- -
在 HTML 页面中，我们只需引入 styles.css 文件即可使用 em-normalize 提供的样式：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------- ---------- ---- ----- --- ----- ---------------- ------------------ ------- ------ ---- ------- --- ----- --- ---- ------------------------ ------- -------
结论
使用 npm 包 em-normalize 不仅可以提高我们的开发效率，还能保证页面在不同设备上的显示效果一致，减少了兼容性问题的出现。同时，该包还引入了相对单位 em 的使用，使得页面更加符合易读易理解的目的。我们建议在日常前端开发中使用该包，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8881e8991b448db477