Webpack移动端适配方案：rem与vw实战详解

在移动端开发中，适配不同宽度的屏幕是一个核心挑战。目前业界主流的解决方案主要基于CSS相对单位，其中最具代表性的两种方案是rem和vw。

rem适配方案

根据W3C标准，rem代表根元素（即HTML标签）的font-size。这意味着只要计算出不同设备下根元素的字体大小，即可通过统一的CSS代码实现页面的等比缩放。

首先，需要在HTML中引入关键的meta标签，将视口宽度设置为设备宽度，并禁止用户缩放：

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

接着，通过JavaScript动态计算根元素的字体大小。以屏幕宽度的十分之一为例，若设备宽度为375px，则根元素font-size设为37.5px：

//根据文档宽度计算根元素的字体大小,以文档宽度的1/10为例，如果屏幕宽度为375，那么根元素font-size就为37.5px
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

在CSS中，只需使用rem单位即可实现自适应。例如，设置div宽度为2rem，若根元素font-size为37.5px，则div实际宽度为75px；若屏幕宽度变为360px，div宽度则自动调整为72px。对于常见的750px设计稿，若某区域高度为30px，在CSS中设置为height: 0.4rem（即30/75）即可完成等比缩放。

//此时如果在css中写
.div{
  width: 2rem;
}
//那么这个div的宽度就是75px，同理如果屏幕宽度为360，那么div就宽72px。
//日常开发中，比较常见的设计稿是750px，在设计稿中一个区域的高度为30px的话，
//在css中写成 height：0.4rem（30/75），就能完成等比缩放

在实际的Webpack开发流程中，通常借助插件自动化完成rem适配，主要涉及postcss-pxtorem和lib-flexible两个工具。

首先安装依赖：npm i postcss-pxtorem --D 和 npm i amfe-flexible --S

随后，在webpack.config.js中配置postcss-loader，确保CSS文件经过该插件处理。

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,"/dist"),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:  ['style-loader','css-loader','postcss-loader']  //配置postcss-loader
            }
        ]
    },  
}

在项目根目录创建.postcssrc.js文件，配置postcss-pxtorem插件参数，指定设计稿基准宽度（如750px）及需要转换的属性列表。

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 75,                   //750的设计稿
        propList: ['*']
     }
   }
}

最后，在Webpack入口文件（如./src/index.js）中引入lib-flexible库。

import 'amfe-flexible'

配置完成后，开发者在CSS中直接书写设计稿上的绝对像素值即可。例如，750px设计稿中一个id为test的div宽度为200px，CSS中直接写width: 200px，无需手动换算为rem。

#test{
  width: 200px
}

vw适配方案

另一种主流方案是vw（viewport width），它表示视口宽度的百分之一，是一个相对于浏览器可视区域宽度的单位。

//移动页面中不可少的meta,将设备屏幕的宽度设置成将文档宽度
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

在移动端配置了width=device-width后，100vw即代表屏幕的实际宽度。

使用vw布局的优势在于无需通过JavaScript动态设置根元素font-size，而是直接基于屏幕宽度进行计算。例如，在750px设计稿中，若某div宽度为200px，可直接计算并写入CSS：width: 200 / 750 * 100vw。

在Webpack项目中，可通过postcss-px-to-viewport插件实现px到vw的自动转换。

安装依赖：npm i postcss-px-to-viewport --D

与rem方案类似，需在webpack.config.js中配置postcss-loader，并在根目录的.postcssrc.js文件中配置postcss-px-to-viewport插件参数。

module.exports = {
  "plugins": {
    'postcss-px-to-viewport': {
        viewportWidth: 750                 //750的设计稿
     }
   }
}

配置完成后，同样可以在CSS中直接书写设计稿的绝对像素值，转换逻辑与rem示例一致。

适配第三方UI框架

在移动端开发中，常需引入Vant、Mint-UI等第三方UI框架。这些框架通常基于375px的设计稿使用px单位，而项目自身可能基于750px设计稿。若统一使用相同的viewportWidth，会导致UI框架样式错乱。

此时，可在.postcssrc.js中进行差异化配置（以vw为例，rem同理）。通过判断文件路径，区分项目代码与node_modules中的第三方库，分别指定不同的viewportWidth。

const path = require('path')
module.exports = ({file}) => {

  //如果使用vant UI框架
  const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  return {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: width,
      }
    }
  }
}

总结

rem和vw均为常用的移动端适配方案。主要区别在于：兼容性方面，rem支持更老的浏览器版本（可参考caniuse.com）；实现方式上，rem需依赖JavaScript计算根元素字体大小，而vw纯CSS实现，无需额外脚本。

本文介绍了Webpack环境下rem与vw的适配实践。如需了解更多移动端适配相关内容，建议查阅本站过往文章或关注后续更新。