随着移动设备的普及，越来越多的网站需要适配不同的移动设备。为了提高开发的效率和应用的稳定性，使用 webpack+PostCSS 进行移动端适配是一种不错的选择。
为什么选择 webpack+PostCSS？
webpack
webpack 是一个强大的模块化打包工具，自带的模块管理能力可以让我们将不同的模块打包成一个 bundle，便于管理与维护。同时，webpack 能够进行懒加载、代码分割等优化，提升网页的加载速度和用户体验。除此之外，webpack 还支持各种预处理器、编译器等，让我们的前端开发变得更加灵活、高效。
PostCSS
PostCSS 是一个基于 JavaScript 的 CSS 处理器，它不仅可以进行预处理、后处理、优化等，还可以通过插件的形式扩展更多的功能。PostCSS 的插件非常丰富，可以实现 cssnext、autoprefixer、px2rem 等等，大大提高了前端开发的效率。
移动端适配方案
移动设备的屏幕尺寸和像素密度不同，因此需要对网页进行适配。一般来说，主流的移动端适配方案有以下几种：
- 固定像素适配方案（即写死像素值）
- rem 适配方案
- vw/vh 适配方案
其中，固定像素适配方案不适用于适配不同尺寸的设备，而 rem 适配方案和 vw/vh 适配方案则需要在代码中手动将像素值转化为 rem 或 vw/vh 进行计算，代码冗余，并且容易出现误差。
因此，我们可以借助 PostCSS 的插件以及 webpack 的模块管理能力，将像素值自动转化为 rem 或 vw/vh，达到快速且准确的移动端适配。
我们可以使用 postcss-pxtorem 插件来将像素单位转化为 rem 单位，也可以使用 postcss-px-to-viewport 插件将像素单位转化为 vw/vh 单位。
以 postcss-pxtorem 为例，我们可以在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- -------------- - ---------------------------
-------------- - -
-- ----
------ -----------------
-- ----
------- -
----- ----------------------- --------
--------- ------------
--
-- -----
------- -
------ -
-- -- ------ --------- ---
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
-- --- ------ --- ----- --- --
-
----- ---------
---- -
----------------------------
-------------
-
------- -----------------
-------- -
-------- -- -- -
----------------
---------- ---- -- ----- - --
--------- ------ -- ------- --- --
---
--
--
--
--
--
--
--
-- ----
-------- -
-- ---- ---- -------- ------ -----
--- -------------------
--------- ----------------------
--------- -------------
------- ---------
---
-- --- --- -------- --- ---
--- ----------------------
--------- -------------
---
--
-- -------
---------- -
----- -----
------------ -------------------- --------
--
--在 PostCSS 的 options 中，我们使用 postcss-pxtorem 插件，并设置了设计稿的宽度 rootValue 为 100，这意味着我们假设设计稿的宽度为 750px，将 750px 等分成了 750 / 10 = 75 个 rem，即每个 rem 等于 10px。
在 CSS 文件中，我们可以直接书写像素单位，而无需手动转换。例如：
.box {
width: 200px;
height: 100px;
margin: 20px;
}将会被自动转化为：
.box {
width: 2rem;
height: 1rem;
margin: 0.2rem;
}总结
webpack+PostCSS 的移动端适配方案可以让我们快速、准确地适配不同尺寸的移动设备，减少代码量，提高开发效率。通过引入 postcss-pxtorem 等插件，我们可以自由地使用像素单位，而无需手动转换，大大提高了代码的可读性。值得一提的是，vw/vh 适配方案也是一种不错的选择，可以根据实际需求进行选择。
以下是完整的示例代码：https://github.com/Lee-hy/hello-webpack-postcss
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2a7f048841e9894f1dafc