手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。本文介绍通过webpack在angular项目上把px自动转换为rem的方式，实现移动端rem适配方案

仓库模板地址：angular8 px转rem模板示例

配置webpack自定义

Angular CLI 提供了custom-webpack的builder，可以通过该builder轻松的调整webpack的插件配置自动转化。

1、安装 @angular-builders/custom-webpack builder

npm i -D @angular-builders/custom-webpack

2、新建 webpack 配置文件 extra-webpack.config.js

module.exports = {  
    module: {    
      // 或者 loaders    
      rules: [      
         {        
             test: /\.less$/,        
             loader: "webpack-px2rem-loader",        
             // 这个配置是可选的        
             options: {          
                // 1rem=npx 默认为 10          
                basePx: 37.5,          
                // 只会转换大于min的px 默认为0          
                // 因为很小的px（比如border的1px）转换为rem后在很小的设备上结果会小于1px，有的设备就会不显示          
                min: 2,          // 转换后的rem值保留的小数点后位数 默认为3          
                floatWidth: 3        
              }      
           }    
         ]  
     }
 };

3、在 angular.json 中配置自定义 builder

"architect": {
    "build": {
       -  "builder": "@angular-devkit/build-angular:browser",
       +  "builder": "@angular-builders/custom-webpack:browser",
           "options": {
              +  "customWebpackConfig": {
                 +  "path": "./extra-webpack.config.js",
                 +  "mergeStrategies": {
                     +  "module.rules": "append"
                 +   },
                 +   "replaceDuplicatePlugins": true
               +   }
        ...
      },
      ...
    },
    "serve": {
        -  "builder": "@angular-devkit/build-angular:dev-server",
        +  "builder": "@angular-builders/custom-webpack:dev-server",
       ...
    }
    ...
 }

4、安装转化插件

npm i --save-dev lib-flexible webpack-px2rem-loader

5、在 main.ts 引入使用lib-flexible

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+  import 'lib-flexible';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

作用：

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。

效果图

不转换