适配思路
使用css3的新特性transforml来实现,transform有旋转rotate,缩放 scale,倾斜 skew,平移 translate。这里我们需要用到的就是transform的缩放 scale
实现方法
首先我们想要那一块标签或者div适配我们严格给定一个设计稿的宽高尺寸。然后我们再去计算一下放大或者缩小的倍数
这里因为需要适配的屏幕都不一样,所以这里缩放值scale是一个变量,不能是固定值,这样就需要我们在进入页面的时候就需要计算一下这个缩放值
然后在这个页面的created或者mounted生命周期执行该函数即可
然后献上效果图
这是标准情况下
这是不标准的情况下
手机端也适配
最后上代码
这里只上了适配的关键代码,其他视图效果代码不做展示
#bodbox{
width: 1920px;
height: 1080px;
position: relative;
transform: scale(var(--scale)) !important;
transform-origin: left top;
background-image: url('@/assets/image/backgroundImg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
<template>
<div id="bodbox" :style="{'--scale':scale}">
<div class="header">
</div>
</div>
<template>
data() {
return {
scale:1
}
}
created() {
this.flgScale()
},
methods: {
flgScale(){
console.log(window,22222);
this.scale = window.innerWidth/1920
window.onresize = () => {
this.scale = window.innerWidth/1920
}
}
},
此文章仅作参考和本人工作中发现的问题记录,如有其他问题欢迎指出