本文你主要用于记录viewport适配方案在Ng中的应用.具体viewport方案的优劣和介绍不做过多介绍.

1.安装webpack自定义打包库

1
npm i @angular-builders/custom-webpack

安装前请确认自己的Ng版本,不同版本在angular.json的配置上有略微不同;查看版本

2.配置angular.json

以下是Angularg9的配置规则,修改builder,并添加options规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  ...
  "projects": {
    "xxxx": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "mergeRules": {
                "module.rules": "prepend"//自定义配置规则
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "angular02:build"
          }
        }
      }
    }
  }
}

3.安装postcss-px-to-viewport

1
npm i -D postcss-px-to-viewport

本文只安装并配置了 postcss-px-to-viewport插件,其余请根据需要自行安装并配置webpack

4.配置webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    // syntax: 'postcss-scss',
    plugins: () => [
      require('postcss-px-to-viewport')({
        viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数
        viewportUnit: "vw", //指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false, // 允许在媒体查询中转换`px`
        include: /\/src\//,
      })
    ]
  }
};

module.exports = (config) => {
  config.module.rules = config.module.rules.filter(
    rule => rule.test.toString() !== "/\\.scss$|\\.sass$/|\\.less$|\\.styl$|\\.css$"
  );

  // 配置自定义的scss处理
  config.module.rules.push({
    test: /\.(scss|sass)$/,
    use: [
      postcssLoader
    ],
  });
  return config
}

5. 设置mata标签

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">