B端项目自适应

1、需求当在不同分辨率的情况下4K、2K、小型笔记本项目页面看起来布局差异会很大需要一个方案来适配让项目在不同分辨率的屏幕下看起来差异不会那么大2、代码responsive.ts/** * 全局等比缩放方案 * * 设计稿基准宽度1920pxB 端主流设计稿宽度 * 缩放范围0.85 ~ 1.25避免极端屏字号失控 * * 工作原理 * 1. 根据 window.innerWidth 计算当前屏幕相对基准宽度的缩放系数 * 2. 将 zoom 应用到 html整页内容含 Element Plus 弹窗/抽屉随之一致缩放 * 3. 同步输出 --app-height CSS 变量window.innerHeight / zoom * 用于修正 body/#app 等根容器的高度避免 zoom1 时 100vh 溢出视口 * * 注意CSS zoom 不会触发 window resize 事件但改变窗口大小会同时触发 * zoom 重算和 resize监听一次 resize 即可覆盖两种场景。 */ const BASE_WIDTH 1920 const MIN_ZOOM 0.85 const MAX_ZOOM 1.25 export function setupResponsive() { const el document.documentElement const update () { const w window.innerWidth const h window.innerHeight const zoom Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, w / BASE_WIDTH)) el.style.zoom String(zoom) // 修正高度让根容器在 zoom 之后正好填满视口不出现多余滚动条 el.style.setProperty(--app-height, ${h / zoom}px) } update() window.addEventListener(resize, update) }main.js引用import { createApp } from vue import { createPinia } from pinia import ElementPlus from element-plus import element-plus/dist/index.css import highlight.js/styles/github.css import * as ElementPlusIconsVue from element-plus/icons-vue import App from ./App.vue import router from ./router import { setupResponsive } from ./utils/responsive import ./styles/global.css setupResponsive() const app createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.use(createPinia()) app.use(router) app.use(ElementPlus) app.mount(#app)注意100vh会影响窗口大小改用100%global.css:root { --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #eef2ff; --primary-hover: #e0e7ff; --bg: #f8fafc; --bg-card: #ffffff; --bg-hover: #f1f5f9; --surface: #ffffff; --surface-alt: #f1f5f9; --text: #0f172a; --text-secondary: #64748b; --text-muted: #94a3b8; --border: #e2e8f0; --border-light: #f1f5f9; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03); --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 24px; --sidebar-width: 260px; --studio-width: 300px; --topbar-height: 56px; /* Typographic scale — semantic, modular font sizes */ --font-size-xs: 11px; /* micro labels: badges, indices, tiny hints */ --font-size-sm: 12px; /* captions: small labels, secondary notes */ --font-size-base: 13px; /* secondary text: metadata, hints, citations */ --font-size-md: 14px; /* body: nav items, paragraphs, buttons */ --font-size-lg: 15px; /* card titles, inputs */ --font-size-xl: 16px; /* section titles, in-page headings */ --font-size-lg-xl: 18px; /* sidebar/panel titles */ --font-size-2xl: 16px; /* unified page titles (2px smaller than sidebar/panel titles) */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Inter, Noto Sans SC, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; /* zoom 应用在 html 上时100vh 仍是原始视口高度会导致 zoom1 时溢出。 用 responsive.ts 注入的 --app-height 修正使根容器正好填满视口。 */ height: var(--app-height, 100vh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #app { height: 100%; }