主流适配方案

前言

• 移动端设备的尺寸很多，而 UI 设计稿一般只会基于一个尺寸（一般是 375px 或 750px ）进行设计。目前移动端适配方案有多种，本文将介绍一些具有代表性的适配方案。如果是750，须除以2

主流适配方案

• viewport方案

1.在index.html中配置
<meta name="viewport" content="device-width" initial-scale=1,user-scalable="no">
2.可以使用postcss-px-to-viewport这个库自动转
3.配置postcss-px-to-viewport，在vue.config.js中
config.module
.rule('vue')
.test(/\.vue$/)
.use('style-vw-loader')
.options{
	unitToConvert:'px',
	viewportWidth:375,
	viewportHeight:1334,
	unitPrecision:5,
	viewportUnit:'vw',
	selectorBlackList:[],
	minPixeValue:1,
	mediaQuery:false
}
4.对于行内样式不能转化成vw，解决方案
- 安装style-vw-loader插件
- 在3中加
.loader('style-vw-loader')