vue-resize-plugin

$3

``javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { ScreenAdaptPlugin } from './plugins/screen-adapt';

const app = createApp(App);

app.use(ScreenAdaptPlugin, {
designWidth: 1920,
designHeight: 1080,
maxScale: 1.2,
minScale: 0.6
});

app.mount('#app');
`
`vue






`
`javascript
// 动态字体适配
// utils/font-adapt.js
export const adaptFontSize = (size) => {
const scale = screenAdapt.getScale();
return ${size * scale}px;
};

// 或使用CSS变量方案
export const setupFontVariables = () => {
const scale = screenAdapt.getScale();
document.documentElement.style.setProperty('--base-font-size', ${16 * scale}px);
};

`
`vue






`
`vue
// 使用动态导入优化首屏加载
const HeavyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'));

// 在大屏中按需渲染


`
`css
/混合使用vw/vh与rem/
/ 基础样式配置 /
:root {
--base-font-size: 16px;
--design-width: 1920;
--design-height: 1080;
}

/ 计算vw基准值 /
html {
font-size: calc(100vw / var(--design-width) * 10);
}

/ 组件样式 /
.container {
width: 50rem; / 相当于设计稿中的500px /
height: 30rem; / 相当于设计稿中的300px /
font-size: 1.6rem; / 相当于设计稿中的16px /
}

/ 特殊尺寸使用vh /
.title {
font-size: 2vh; / 相对于视口高度的2% /
}

`
`css
/ 媒体查询断点 /
/ 针对不同尺寸屏幕的调整 /
@media (max-width: 1600px) {
.card {
width: 40rem;
height: 25rem;
}
}

@media (max-width: 1366px) {
.card {
width: 35rem;
height: 22rem;
}
}

`
`javascript
// 多分辨率测试
// 测试工具：模拟不同分辨率
const testResolutions = [
{ width: 1920, height: 1080 },
{ width: 1600, height: 900 },
{ width: 1366, height: 768 },
{ width: 1280, height: 720 }
];

const simulateResolution = (resolution) => {
document.documentElement.style.width = ${resolution.width}px;
document.documentElement.style.height = ${resolution.height}px;
window.dispatchEvent(new Event('resize'));
};

`
`javascript
// 性能监控
// 使用Performance API监控渲染性能
const monitorPerformance = () => {
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('性能指标:', entry);
});
});

observer.observe({ entryTypes: ['frame', 'longtask'] });
};

``