小洛的前端技术博客Appearance
大屏自适应
安装插件
bash
npm install autofit.jsnpm install autofit.js使用
js
import autofit from 'autofit.js';
export default {
mounted() {
autofit.init({
designWidth: 1920, // 设计稿宽度（常见大屏分辨率）
designHeight: 1080, // 设计稿高度（16:9比例）
renderDom: '#app', // 渲染容器（建议使用最外层包裹元素）
resize: true, // 开启窗口Resize监听
// 新增配置：处理非16:9屏幕的适配策略
mode: 'scale', // 'scale'（等比缩放）或 'stretch'（拉伸填充）
// 性能优化：设置Resize防抖时间
debounceTime: 300, // 防抖时间（毫秒）
});
},
beforeDestroy() {
// 组件销毁时移除Resize监听
autofit.destroy();
}
};import autofit from 'autofit.js';
export default {
mounted() {
autofit.init({
designWidth: 1920, // 设计稿宽度（常见大屏分辨率）
designHeight: 1080, // 设计稿高度（16:9比例）
renderDom: '#app', // 渲染容器（建议使用最外层包裹元素）
resize: true, // 开启窗口Resize监听
// 新增配置：处理非16:9屏幕的适配策略
mode: 'scale', // 'scale'（等比缩放）或 'stretch'（拉伸填充）
// 性能优化：设置Resize防抖时间
debounceTime: 300, // 防抖时间（毫秒）
});
},
beforeDestroy() {
// 组件销毁时移除Resize监听
autofit.destroy();
}
};常见问题解决方案
问题 1：边框模糊（缩放导致像素偏移）
css
/* 在容器上添加transform-origin和像素对齐 */
#app {
transform-origin: top left;
image-rendering: -webkit-optimize-contrast; /* 优化缩放清晰度 */
}/* 在容器上添加transform-origin和像素对齐 */
#app {
transform-origin: top left;
image-rendering: -webkit-optimize-contrast; /* 优化缩放清晰度 */
}问题 2：大屏切换分辨率后布局错乱
js
// 手动触发适配（如切换分辨率后）
autofit.reset();// 手动触发适配（如切换分辨率后）
autofit.reset();原生 JS 自适应方案（无需第三方插件）
1. 核心原理：等比缩放 + 居中布局
js
// 在入口文件中添加
export class ScreenFit {
constructor(designWidth = 1920, designHeight = 1080) {
this.designWidth = designWidth;
this.designHeight = designHeight;
this.init();
}
init() {
this.adjust();
window.addEventListener('resize', () => this.adjust());
}
adjust() {
const container = document.getElementById('app');
if (!container) return;
const { innerWidth, innerHeight } = window;
const scaleX = innerWidth / this.designWidth;
const scaleY = innerHeight / this.designHeight;
const scale = Math.min(scaleX, scaleY); // 保持最小缩放，避免拉伸
// 计算居中偏移量
const translate = `translate(${((innerWidth - this.designWidth * scale) / 2)}px, ${((innerHeight - this.designHeight * scale) / 2)}px)`;
container.style.cssText = `
transform: scale(${scale}) ${translate};
transform-origin: top left;
width: ${this.designWidth}px;
height: ${this.designHeight}px;
min-width: 100%;
min-height: 100%;
overflow: hidden;
`;
}
destroy() {
window.removeEventListener('resize', () => this.adjust());
}
}
// 使用示例
new ScreenFit(1920, 1080);// 在入口文件中添加
export class ScreenFit {
constructor(designWidth = 1920, designHeight = 1080) {
this.designWidth = designWidth;
this.designHeight = designHeight;
this.init();
}
init() {
this.adjust();
window.addEventListener('resize', () => this.adjust());
}
adjust() {
const container = document.getElementById('app');
if (!container) return;
const { innerWidth, innerHeight } = window;
const scaleX = innerWidth / this.designWidth;
const scaleY = innerHeight / this.designHeight;
const scale = Math.min(scaleX, scaleY); // 保持最小缩放，避免拉伸
// 计算居中偏移量
const translate = `translate(${((innerWidth - this.designWidth * scale) / 2)}px, ${((innerHeight - this.designHeight * scale) / 2)}px)`;
container.style.cssText = `
transform: scale(${scale}) ${translate};
transform-origin: top left;
width: ${this.designWidth}px;
height: ${this.designHeight}px;
min-width: 100%;
min-height: 100%;
overflow: hidden;
`;
}
destroy() {
window.removeEventListener('resize', () => this.adjust());
}
}
// 使用示例
new ScreenFit(1920, 1080);2. CSS 配合实现无缝适配
css
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000; /* 黑色背景掩盖留白 */
}html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000; /* 黑色背景掩盖留白 */
}性能优化(防抖 Resize 事件)
js
// 修改ScreenFit类的adjust方法
adjust() {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
// 执行适配逻辑
}, 300); // 300ms防抖
}// 修改ScreenFit类的adjust方法
adjust() {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
// 执行适配逻辑
}, 300); // 300ms防抖
}