前端开发中，响应式布局是一个非常重要的概念。为了适应不同屏幕大小的设备，我们需要使用不同的尺寸单位来完成页面的布局。其中，rem 是一种非常实用的尺寸单位，在不同屏幕下可以自动调整大小。本文将介绍一个 NPM 包 hotrem，它可以帮助你轻松地实现 rem 布局。
什么是 hotrem？
hotrem 是一个基于 postcss 的插件，可以根据设计稿的尺寸自动计算出 rem 值，并进行替换。同时，它还可以自动识别图片尺寸、字体大小和 viewport 信息，从而完成对 web 页面的自适应布局。
安装 hotrem
在使用 hotrem 之前，需要确保你的项目中已经安装了 postcss。如果没有安装，可以使用以下命令进行安装：
npm install postcss --save-dev
安装完成之后，可以使用以下命令安装 hotrem：
npm install hotrem --save-dev
安装完成后，需要在 postcss 的配置文件中添加 hotrem 插件。例如，在 webpack.config.js 中配置 postcss-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
------ ----------
-------- -
------------------- ------------- --- ---
--
--
--
--
--
--
--
--其中，rootFontSize 参数表示根元素的字体大小是多少，这里设置为 100，方便计算。
使用 hotrem
安装和配置完成后，我们就可以在 CSS 文件中使用 rem 单位了。
例如，如果你的设计稿是以 750px 为宽度进行设计的，那么可以在 CSS 中使用以下代码来定义尺寸：
.container {
width: 6.4rem;
padding: 0 1.6rem;
margin: 0 auto;
}其中，6.4rem 实际上是 640px。hotrem 会自动将其转换为 rem 值，并进行替换。
设置基准值
在 hotrem 中，根元素的字体大小决定了 rem 值的计算方式。默认情况下，hotrem 会将根元素的字体大小设置为 10px，并在计算 rem 值时使用该值。如果你的设计稿是以 750px 为宽度进行设计的，那么可以使用以下代码来设置根元素的字体大小：
html {
font-size: 100px;
}其中，100px 表示根元素的字体大小是 100 像素。hotrem 会自动根据该值计算 rem 值，并进行替换。
自适应布局
在 hotrem 中，为了实现自适应布局，需要使用以下代码来设置 viewport 信息：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
其中，width=device-width 表示页面的宽度等于设备的宽度（即 100% 宽度），initial-scale=1 表示初始缩放比例为 1，user-scalable=no 表示禁止用户缩放页面。使用该代码后，页面就可以自动适应不同尺寸的设备了。
示例代码
本文的示例代码可以在以下链接中下载：
https://github.com/hotrem/hotrem-demo
结论
hotrem 是一个非常实用的 NPM 包，可以帮助我们轻松地实现 rem 布局和自适应布局。只需要安装和配置一次，就可以在整个项目中使用。如果你正在寻找一个高效的方式来处理响应式布局，那么 hotrem 绝对是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be381e8991b448e5950