一、场景:在不同的分辨率下使用同一张图片会出现拉伸或者压缩等变形情况,通常设计师会做两张图去适应1920和1440的分辨率,根据给定的图片对应不同分辨率显示。
二、思路:
- 先写好布局结构和样式,可以先按照一种分辨率的情况先写好。
- 通过一个变量去判断分辨率的大小。使用window.innerWidth来判断分辨率。
- 把变量放入指定位置去判断是否要改变类名或者是标签。
三、实现:
<template>
<div class="home-page">
<img v-if="!isBigScreen" :src="require('@/assets/adr/home1920.png')" alt="" />
<img v-else :src="require('@/assets/adr/home1440.png')" alt="" srcset="" />
<!-- <div :class="isBigScreen ? 'blue' : 'red'"></div> -->
</div>
</template>
<script>
export default {
name: 'preview-show',
data() {
return {
innerWidth: 0
}
},
created() {
this.innerWidth = window.innerWidth
window.addEventListener('resize', () => {
this.innerWidth = window.innerWidth
})
},
computed: {
isBigScreen() {
return this.innerWidth >= 1920
}
}
}
</script>
<style lang="scss" scoped>
.home-page {
height: 99%;
img {
height: 100%;
width: 100%;
}
.blue {
height: 100vh;
background-color: blue;
}
.red {
height: 100vh;
background-color: red;
}
}
</style>