vue3【实战】响应式主题（实时获取页面比例，指定尺寸内按比例缩放，超过指定尺寸保持高度不变的图片）
实时获取页面比例
- 移动端设计稿通常为 750px
- 当前窗口的宽为
window.innerWidth - 通过 useResizeObserver 可实时监听窗口大小的变化
src/stores/theme.ts
export const useThemeStroe = defineStore('theme', () => {const rate = ref(0)function setRate(newRate: number) {rate.value = newRate}return { rate, setRate }
})
src/App.vue
import { useThemeStroe } from '@/stores/theme'const themeStroe = useThemeStroe()useResizeObserver(document.body, () => {const w_width = window.innerWidth// 设计稿的宽度const contentWidth = 750themeStroe.setRate((w_width / contentWidth).toFixed(2))
})
src/pages/index.vue
页面中获取比例
import { useThemeStroe } from '@/stores/theme'const themeStroe = useThemeStroe()
:style="{ height: themeStroe.rate * 24 + 'rem' }"
指定尺寸内按比例缩放，超过指定尺寸保持高度不变的图片
src/pages/index.vue
页面中的图片高度根据随窗口变化动态更新 rate 计算得到
<imgclass="w-full"style="object-fit: cover":style="{ height: themeStroe.rate * 24 + 'rem' }"src="https://img0.baidu.com/it/u=998088135,496941855&fm=253&fmt=auto&app=138&f=PNG?w=600&h=300"/>
import { useThemeStroe } from '@/stores/theme'const themeStroe = useThemeStroe()
src/App.vue
import { useThemeStroe } from '@/stores/theme'const themeStroe = useThemeStroe()useResizeObserver(document.body, () => {const w_width = window.innerWidth// 设计稿的宽度const contentWidth = 750themeStroe.setRate(w_width < contentWidth ? +(w_width / contentWidth).toFixed(2) : 1)
})
src/stores/theme.ts
export const useThemeStroe = defineStore('theme', () => {const rate = ref(0)function setRate(newRate: number) {rate.value = newRate}return { rate, setRate }
})