适配解决方案

一、大屏适配方案

1、第一步 封装一个全局组件
假设组件命名为 ScreenAdapter

<template>
	<div class="ScreenAdapter" :style="style">
		<slot/>
	</div>
</template>
<script>
export default {
	name: 'ScreenAdapter',
	// 参数注入
	props: {
		width: {
			type: Number,
			default: document.documentElement.clientWidth
		},
		height: {
			type: Number,
			default: document.documentElement.clientHeight
		}
	},
	data () {
		return {
			style: {
				width: this.width + 'px',
				height: this.height + 'px',
				transform: 'scale(1) translate(-50%, -50%)'
			}
		}
	},
	mounted () {
		this.setScale()
		// window.onresize = this.Debounce(this.setScale, 1000)
		window.addEventListener('resize', this.Debounce(this.setScale, 1000))
		this.$once('hook:beforeDestory', () => {
			window.removeEventListener('resize', this.Debounce())
		})
	},
	methods: {
		Debounce: (fn, t) => {
			const delay = t || 500
			let timer
			return function () {
				const args = arguments
				if (timer) clearTimeout(timer)
				timer = setTimeout(() => {
					timer = null
					fn.apply(this, args)
				}, delay)
			}
		},
		// 获取放大缩小比例
		getScale () {
			const w = window.innerWidth / this.width
			const h = window.innerHeight / this.height
			return w < h ? w : h
		},
		// 设置比例
		setScale () {
			this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
		}
	}
}
</script>
<style lang="stylus" scoped>
.ScreenAdapter {
	transform-origin 0 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: 0.3s;
}
</style>

2、第二步 将此组件作为外壳，包在我们搭建的页面上

<ScreenAdapter>
	<div>
		大家好，我是大屏展示页面
	</div>
</ScreenAdapter>

3、第三步 网页规范
1、Div布局多采用flex+百分比布局(也可以根据美工设计默认写px)
2、根据美工给出的设计 主要是为了获取美工给的分辨率 比如 1920*1080

二、移动端适配之rem

1、第一步 rem.js文件里

function reSize () {
	let clientWidth = document.documentElement.clientWidth
	document.documentElement.style.fontSize = 20 * (clientWidth / 375) + 'px'
	// 因为大部分移动端是以iphone6,7，8尺寸设计的，以此为基准调试，1rem = 20px，选择20为基数是为了解决chrome中最小字体为12px问题，也可以设为其他基准值
}
reSize（）
window.onresize = reSize

2、第二步 在main.js入口文件引入即可

import './utils/rem.js'

三、vue移动端h5适配方案二

第一步、安装依赖

yarn add postcss-pxtorem@5.1.1
yarn add amfe-flexible@2.2.1
// 这个是不同浏览器css自动加前缀
yarn add autoprefixer@8.0.0

第二步、引入

在main.js里引入

import 'amfe-flexible'

第三步、在postcss.config.js配置

注意：如果是postcss-pxtorem和autoprefixer这俩同时配置的话，一定要把 .browserslistrc 文件里的
not dead 删除掉，否则不生效

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue ({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
      // vant使用的设计标准为375 后面根据自己设计图设置尺寸
        return file.indexOf('vant') !== -1 ? 41.4 : 41.4
      },
      unitPrecision: 4,
      // selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
      mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
      // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
      propList: ['*']
    },
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    // 适用版本 5.1.1
    // 兼容浏览器，添加前缀
    autoprefixer: {
      overrideBrowserslist: [
        '> 1%',
        'last 3 versions',
        'not ie <= 8',
        'chrome >= 14',
        'safari >= 3',
        'ios >= 8',
        'android >= 4.0'
      ],
      grid: true
    }
  }
}