方案一：vw实现移动端适配

https://www.w3cplus.com/css/vw-for-layout.html

方案二：手淘rem实现移动端适配

页面头部增加

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

npm安装lib-flexible，并在入口js引入

cmd：npm i lib-flexible
src/index.js：import 'lib-flexible'

webpack4 postcss-pxtorem安装

npm install --save-dev postcss-loader@4.3.0
npm install postcss --save-dev
npm install postcss-pxtorem@5.1.1 --save-dev
配置：

  1. rules:[
  2.             {
  3.                 test : /\.css$/, //正则，处理css文件
  4.                 use : ['style-loader','css-loader',{
  5.                     loader: 'postcss-loader',
  6.                     options: {
  7.                         postcssOptions: {
  8.                             plugins: {
  9.                                 "postcss-pxtorem":{
  10.                                     rootValue: 100,
  11.                                     unitPrecision: 5,
  12.                                     propList: ['*'],
  13.                                     selectorBlackList: [],
  14.                                     replace: true,
  15.                                     mediaQuery: false,
  16.                                     minPixelValue: 0,
  17.                                     exclude: /node_modules/i
  18.                                 }
  19.                             }
  20.                         }
  21.                     }
  22.                 }] //从head里面插入style,开发模式使用
  23.                 //use : [MiniCssExtractPlugin.loader,"css-loader"] //直接生成css文件
  24.             },
  25.   ]

相关文档：
https://www.npmjs.com/package/postcss-loader/v/4.3.0
https://www.npmjs.com/package/postcss-pxtorem
https://www.npmjs.com/package/postcss
注意事项：
1、版本问题，webpack4支持postcss-loader@4.3.0，postcss-pxtorem@5.1.1，再高会报错api不存在
2、写法问题需要注意版本不同配置写法不同

webpack4 安装 px2rem-loader 很遗憾，不适用，无法排除不想转换的css文件

npm install px2rem-loader --save-dev

  1. module.exports = {
  2.   // ...
  3.   module: {
  4.     rules: [{
  5.       test: /\.less$/,
  6.       use: ['style-loader', 'css-loader', 'less-loader', {
  7.         loader: 'px2rem-loader',
  8.         options: {
  9.           remUni: 75, // 适合750的设计稿 1rem = 75px 
  10.           remPrecision: 8 // px转rem小数点保留的位置
  11.         }
  12.       }]
  13.     }]
  14.   }
  15. }

安装postcss-px2rem-exclude

npm i --save-dev postcss-px2rem-exclude

根目录下建立postcss.config.js，配置如下

  1. module.exports = {
  2.   plugins: {
  3.     //remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
  4.     //假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
  5.     'postcss-px2rem-exclude': {
  6.       remUnit: 75,
  7.       minPixelValue: 2, //设置要替换的最小像素值(2px会被转rem)。 默认 0
  8.       exclude: /node_modules|folder_name/i,
  9.       // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
  10.                   // unitPrecision: 5, //允许REM单位增长到的十进制数字。
  11.                   //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
  12.       // propBlackList: [], //黑名单
  13.        selectorBlackList: ['noRem'], //要忽略并保留为px的选择器
  14.                   // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
  15.                   // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
  16.                   //mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
  18.     }
  19.   }
  20. }

初始化样式

  1. * { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
  2. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
  3. img { border: 0 none; vertical-align: top; }
  4. i, em { font-style: normal; }
  5. ol, ul { list-style: none; }
  6. input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
  7. table { border-collapse: collapse; border-spacing: 0; }
  8. a { text-decoration: none; color: #666; }
  9. body { margin: 0 auto; min-width: 320px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }

通用类Meta

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

移动端激活css:active点击态

  1. document.body.addEventListener('touchstart', function() {});

一些坑

1、微信浏览器特殊设定，需要把document.body.style.fontSize = (1 * dpr) + 'px'dpr需要更改
2、安卓设备不支持base64的image/png进行图片合成，会丢失，而是应该转为base64的image/jpeg格式才能正常合成