移动端适配方案

1.使用 rem

思想：用 rem 代替 px

引入以下代码，根据不同的屏幕宽度动态设置根标签的fontSize的值，UI 以频宽为750px为标准进行设计即可适配不同的机型。注意的是全局的px要用rem替代，这时1rem = 1px

;(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function () {
			var clientWidth = docEl.clientWidth
			// 核心：以750px为频宽即iphone SE频宽的两倍
			docEl.style.fontSize = clientWidth >= 750 ? '100px' : clientWidth / 750 + 'px'
		}
	win.addEventListener(resizeEvt, recalc, false) // 移动设备旋转或PC端页面视口改变事件
	doc.addEventListener('DOMContentLoaded', recalc, false) // DOM Tree加载完毕
})(document, window)

因为都是以 750px 为频宽进行 ui 界面设计，所以 750rem 即为频宽，故以下为验证此方案可适配不同频宽：

• 频宽为375px时：1rem = 0.5px，750rem = 375px
• 频宽为450px时：1rem = 0.6px，750rem = 450px

2.使用 postcss-px-to-viewport 插件

思想：用 viewport 代替 px

安装

npm i postcss-px-to-viewport --save-dev

配置

// webpack.config.js
import PostcssPxToViewport from 'postcss-px-to-viewport'

config.postcss.plugins = [
	PostcssPxToViewport({
		unitToConvert: 'px', // 需要转化的单位
		viewportUnit: 'vw', // 转化成的viewport单位，默认vw
		viewportWidth: 750, // 视口宽度（以UI设计稿宽度为准）
		unitPrecision: 6, // 转化精度，精确到小数点后几位
		minPixelValue: 1, // 小于或等于1时不作转化，默认1
		selectorBlackList: ['postcss-ignore'], // 不转化为viewport单位的类名
		mediaQuery: true, // 媒体查询后是否也作转化，默认false
		exclude: [/node_modules/], // 排除的目录或文件
	}),
]

注意：此方案仅对内联和外联 css 生效，对于行内 css 和 js 动态改变的 css 不会生效

补充

meta标签的name属性指定为viewport时，可以通过content属性进行设备页面视口信息的配置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" /> <-- 视口宽度为设备宽度，初始缩放值为1.0，最大缩放值1.0，不允许用户进行缩放 !-->

• width：页面视口宽度
• height：页面视口高度
• user-scalable：是否允许用户进行缩放,值为 0 或 1
• initial-scale：页面初始缩放值
• minimum-scale：最小缩放值
• maximum-scale：最大缩放值