使用Mixins混入的方式解决自适应适配功能
通用的 css3:scale
缩放方案,通过 ref
指向页面,屏幕改变时缩放内容。项目的基准尺寸是 1920px*1080px
,所以支持同比例屏幕 100%
填充,如果非同比例则会自动计算比例居中填充,不足的部分则留白。
实现代码 screenmixin.js
// * 默认缩放值
const scale = {
width: '1',
height: '1',
};
// * 设计稿尺寸(px)
// const baseWidth = document.body.clientWidth;
// const baseHeight = document.body.clientHeight;
const baseWidth = 1920;
const baseHeight = 1080;
// * 需保持的比例(默认1.77778)
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
export default {
data() {
return {
// * 定时函数
drawTiming: null,
};
},
mounted() {
setTimeout(() => {
this.calcRate();
}, 200);
window.addEventListener('resize', this.resize);
},
created() {
},
beforeDestroy() {
window.removeEventListener('resize', this.resize);
},
methods: {
calcRate() {
const appRef = this.$refs['appRef'];
if (!appRef) return;
// 当前宽高比
const currentRate = parseFloat(
(window.innerWidth / window.innerHeight).toFixed(5),
);
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = (
(window.innerHeight * baseProportion) /
baseWidth
).toFixed(5);
scale.height = (window.innerHeight / baseHeight).toFixed(5);
appRef.style.transform = `scale(${
scale.width}, ${
scale.height}) translate(-50%, -50%)`;
} else {
// 表示更高
scale.height = (
window.innerWidth /
baseProportion /
baseHeight
).toFixed(5);
scale.width = (window.innerWidth / baseWidth).toFixed(5);
appRef.style.transform = `scale(${
scale.width}, ${
scale.height}) translate(-50%, -50%)`;
}
}
},
resize() {
clearTimeout(this.drawTiming);
this.drawTiming = setTimeout(() => {
this.calcRate();
}, 200);
},
},
};
页面使用
<template>
<div ref="appRef" class="wrapper">
<div class="home-canvas">
内容
</div>
</div>
</template>
<script>
import screenMinxi from '@/utils/screenmixin';
export default {
mixins: [screenMinxi],
};
</script>
<style lang="scss" scoped>
// 必需写宽高,如有单位转换在style中写
.wrapper{
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top; /* 缩放基点为左上角 */
overflow: hidden;
}
</style>
2.局部适配方案 mixins.js
export const scaleMixin = {
methods: {
// 计算缩放比例
getScaleRatio() {
const baseWidth = 1920; // 基准宽度
const baseHeight = 1080; // 基准高度
const screenWidth = window.innerWidth; // 屏幕宽度
const screenHeight = window.innerHeight; // 屏幕高度
const ratioX = screenWidth / baseWidth;
const ratioY = screenHeight / baseHeight;
return Math.min(ratioX, ratioY); // 取最小比例作为缩放比例
},
},
mounted() {
// 监听窗口变化,重新计算缩放比例
window.addEventListener('resize', () => {
const scaleRatio = this.getScaleRatio();
this.$refs.wrapper.style.transform = `scale(${
scaleRatio})`;
});
// 初始化缩放比例
const scaleRatio = this.getScaleRatio();
this.$refs.wrapper.style.transform = `scale(${
scaleRatio})`;
},
};
引入使用
import { scaleMixin } from './mixins';
mixins: [scaleMixin],
<div class="canvas-wrapper wrapper" style="width:1600px;heibht:890px;" ref="wrapper" >
<div class="">内容</div>
</div>
样式style
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: left top; /* 缩放基点为左上角 */
transform: scale(1); /* 初始化缩放比例 */
}