开发 WebApp 时，我们通常只会从设计师那边拿到一个尺寸的项目设计图，比如是按照 iphone 6 为基础设计的，因此前端需要让这一套设计稿能够通用在不同的设备型号中，本文介绍的方式是采用 hotcss.js 插件。
在 vue-loader 中使用 px2rem 插件，首先安装 px2rem-loader ：
根据设计稿所采用的手机型号（如iPhone 6 或 iPhone X），那么宽度则为 640px 或 750px ，因此先在 chrome 调试工具中获取移动端的 <html> 根元素的 font-size 的值，然后在配置 vue-loader 时将其设为 remUnit 参数的值:
这样就可以根据设计稿尺寸，在开发时写 CSS 像素的绝对值 ，即 px 单位， px2rem 会自动将尺寸转换成相应的 rem 单位，结合不同终端生成的不同 html 根元素的字体大小，从而实现一套设计稿在不同设备完美兼容的效果。
我将之前做的一个项目目录结构和 Webpack 配置文件提取出来，生成一个简易的 WebApp 脚手架，用于实现本文所述的自适应方案。
Github项目地址： 基于Vue的WebApp项目构建模板
