vue中将两张图片合并并响应所有页面大小的适配
在vue中，将两张图片合并并实现响应式适配可以采用动态单位和@media媒体查询结合的方式。
动态单位
可以使用视口宽度单位vw或响应性根字体大小单位rem。vw是一个浏览器内置的动态单位，100vw等于页面可视区域宽度，可以根据不同屏幕宽度实现动态调整。rem与根元素html的字体大小相关，可以通过动态计算根字体大小来实现适应。
@media媒体查询
@media媒体查询可以根据屏幕宽度设置不同的样式。例如，对于最大宽度为365px的设备，可以设置不同的样式来实现图片合并。
立即学习“前端免费学习笔记（深入）”；
示例代码
<template>
<div class="container">
<img :src="imgUrl1" alt="图片1" />
<img :src="imgUrl2" alt="图片2" />
</div>
</template>
<script>
import { onMounted } from 'vue';
export default {
data() {
return {
imgUrl1: '图片1地址',
imgUrl2: '图片2地址',
};
},
mounted() {
// 动态计算根字体大小，基于视口宽度
const calcRem = () => {
const docWidth = document.body.clientWidth;
const rootFontSize = calcVw(docWidth / 375 * 100, 16);
document.documentElement.style.fontSize = `${rootFontSize}px`;
};
// 媒体查询，针对最大宽度为365px的设备
const query = window.matchMedia('(max-width: 365px)');
const handleMediaQuery = e => {
if (e.matches) {
// 这里写针对最大宽度为365px的设备的样式调整逻辑
} else {
// 这里写针对非最大宽度为365px的设备的样式调整逻辑
}
};
query.addListener(handleMediaQuery);
onMounted(() => {
calcRem();
});
},
};
</script>
<style>
.container {
display: flex;
}
img {
width: 50%; // 这里也可以使用动态单位，如vw
}
@media (max-width: 365px) {
/* 针对最大宽度为365px的设备的样式调整 */
}
</style>原理
该示例通过onmounted生命周期钩子在页面加载完成时触发calcrem函数，根据视口宽度计算根字体大小，从而实现响应式。并使用@media媒体查询针对不同屏幕宽度设置不同的样式，实现图片合并的适配。
效果
使用动态单位和媒体查询，图片将根据页面大小动态调整尺寸和位置，在所有大小的页面中都能正确显示和合并。
