一、大屏适配方案
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
}
}
}