随着移动端设备的普及，前端工程师在设计网页时需要考虑到不同尺寸设备的兼容性问题。其中，最常用的解决方案就是 rem 布局。rem 布局是一种相对布局，以根元素字体大小为基准，而不是固定值像素来表示尺寸。在使用 rem 布局时，我们需要将设计稿中的像素转成 rem，这就需要一个类似 px-to-rem-loader 这样的 npm 包来进行实现。
px-to-rem-loader 是一个 webpack loader，可以帮助我们自动将 css 中的像素值转换为 rem 值。下面我将为大家介绍如何使用 px-to-rem-loader 进行前端布局。
安装
要使用 px-to-rem-loader，首先需要在项目中安装它。在使用 npm 安装时，需要在命令行中输入以下命令：
--- ------- ---------------- ----------
或者在使用 yarn 安装时，需要输入以下命令：
---- --- ---------------- -----
配置
px-to-rem-loader 需要在 webpack 中进行配置。我们需要在 webpack.config.js 中添加一个新的 loader 配置项：
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
-
------- --------------
--
-
------- -------------
-------- -
-------------- -
-
--
-
------- -------------------
-------- -
-- ---
-------- ---
------------- -
-
-
-
-
-
-
-其中，remUnit 表示根元素字体大小的值，一般为设计稿宽度除以 10，remPrecision 表示 rem 的精度，一般设置为 8。
使用
配置完成后，我们就可以在 css 文件中写像素单位了。px-to-rem-loader 会自动将像素值转换为 rem 值。例如，我们想让一个元素的宽度为 100 像素，在样式表中可以这样写：
-------- - ------ ------ -
在经过 px-to-rem-loader 处理后，宽度将被转换为：
-------- - ------ ----------- -
示例代码
下面是一个简单的示例代码，展示了如何使用 px-to-rem-loader 进行前端布局：
--------- -----
------
------
----- ----------------
----------------------- ----------
-------
---------- -
------ ------
------- - -----
----------- -----------
-
---- -
------ ------
------- ------
------- ---- -----
----------------- --------
------ -----
---------- -----
----------- -------
------------ ------
-
--------
-------
------
---- ------------------
---- ----------------- -----------
------
-------
-------上面的代码中，容器宽度为 750 像素，根据设计稿中宽度除以 10，我们设置了 remUnit 为 75。在样式表中，我们使用了像素单位进行布局，而在 webpack 打包时，px-to-rem-loader 会将像素单位转为 rem 单位，保持页面在不同设备上的显示效果相同。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566ad81e8991b448e2ea3