移动端自适应目前主要有 torem 和 toviewport 两种方案，如果项目需要在宽屏上使用时优先使用 rem，其他情况优先使用 viewport

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。

• viewport 方案: postcss-px-to-viewport
• rem 方案: amfe-flexible + postcss-pxtorem

依赖安装

viewport 方案

• postcss-px-to-viewport: 自动将 px 转为 viewport

npm install @ttou/postcss-px-to-viewport -D

				

					
				
				

					
				
				

					
				
				

					
				
			

rem 方案

• amfe-flexible(有宽屏显示竖屏需求则使用 lib-flexible ): 自适应设置根节点字体大小

lib-flexible 会自动在 html 的 head 中添加一个 meta name=”viewport” 的标签，同时会自动设置 html 的 font-size 为屏幕宽度除以 10，也就是 1rem 等于 html 根节点的 font-size。

• postcss-pxtorem: 自动将 px 转为 rem

npm i -S amfe-flexible
// 有宽屏显示竖屏需求则使用 npm i -S lib-flexible
npm i postcss postcss-pxtorem -D

				

					
				
				

					
				
				

					
				
				

					
				
			

配置和引入

main.js/main.ts

viewport 方案

import "normalize.css";

				

					
				
				

					
				
				

					
				
				

					
				
			

rem 方案

import "amfe-flexible";
// 有宽屏显示竖屏需求则使用 import "lib-flexible";
import "normalize.css";

				

					
				
				

					
				
				

					
				
				

					
				
			

postcss.config.js

viewport 方案

module.exports = {
  plugins: {
    "@ttou/postcss-px-to-viewport": { // 配置详情可见 https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0
      unitToConvert: "px",
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 1920,
    },
  },
};

				

					
				
				

					
				
				

					
				
				

					
				
			

rem 方案

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf("vant") !== -1 ? 37.5 : 75; // 37.5用于兼容vant-ui，75基于750px设计稿
      },
      unitPrecision: 5,
      propList: ["*"], // 需要转换rem的元素
      // selectorBlackList: ["van-"],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0,
      exclude: /node_modules|floder_name/i,
    },
  },
};