前端大屏开发技巧

用户8612485135916
8 阅读4分钟

一、先回答 3 个前置问题

  1. 终端到底多少像素？
    先拿 HDMI 线插电脑，在系统设置里看“物理分辨率”。

    • 真 1920×1080 → 直接 1:1 即可。
    • 4K 3840×2160 → 下面所有方案都加一行 transform: scale(2) 或 zoom:2 即可，设计稿不用重画。
    • 异形 2560×720、3240×1080 等 → 用“rem + vw 混合方案”最省事，见路线 3。

  2. 浏览器能不能全屏？
    能 → 走路线 1 或 3。
    不能 → 走路线 2（用 Electron/CEF 打包成 exe）。

  3. 要不要考虑手机端？
    不要 → 放心用 vw/vh 死锁 16:9。
    要 → 再补媒体查询，把布局改成流式，但大屏项目 99% 不用。

二、三条落地路线（按“改代码量”从少到多排序）

路线 1. 纯 vw/vh 死锁（最快，10 行 CSS）
设计稿 1920×1080，那么
1px 设计稿 = 1vw/100 或 1vh/100。
直接抄下面这段，全局生效：

/* 1920x1080 设计稿 */
.app {
  width: 100vw;
  height: 100vh;
  /* 防止小屏出现滚动条 */
  overflow: hidden;
  /* 让内部文字也等比 */
  font-size: 1.5625vw;   /* 30px/1920*100 ≈ 1.5625vw */
}
/* 内部元素全部用 vw/vh 量尺寸 */
.box {
  width: 19.2vw;   /* 设计稿 192px */
  height: 10.8vh;  /* 设计稿 108px */
  margin-left: 2vw;
  margin-top: 1vh;
}

优点：

  • 零计算，设计稿量多少 px 就写多少 vw（÷10 就行）。
  • 任何 16:9 屏幕都能满屏，4K 自动放大。

缺点：

  • 文字最小 12 px 时，如果视口缩到 1024 宽，1.5625vw≈16 px，基本可接受；再小就糊。
  • 不能“用户手动调字号”。

路线 2. rem + 动态 scale（最稳，适合打包 exe）
步骤：

  1. 把 html 的 font-size 设成“100px 对应 1920 宽”这个比例。
  2. 用 JS 每次 resize 都算一次：
    html.style.fontSize = (document.documentElement.clientWidth / 1920 * 100) + 'px'
  3. 设计稿里所有尺寸除以 100 写 rem。
    例：设计稿 88 px → 0.88 rem。

代码模板（Vue/React 通用）：

function fit() {
  const base = 1920;
  const fs = document.documentElement.clientWidth / base * 100;
  document.documentElement.style.fontSize = fs + 'px';
}
fit();
window.addEventListener('resize', fit);

优点：

  • 文字、图标、间距全部等比，不会破版。
  • 打包成 Electron 后，即使终端是 3840×2160，也自动放大 2 倍。

缺点：

  • 多一步 JS，低端盒子要测性能（其实就一行计算，基本无感）。

路线 3. rem + vw 混合（异形屏神器）
核心思想：

  • 横向用 vw，保证绝对撑满；
  • 纵向用 rem，保证文字不会随高度被压扁；
  • 先让 html 的 font-size = 100vw / 19.20，这样 1 rem 永远等于“设计稿 1/100 宽度”。
  • 高度方向再补一个 max-height: 100vh; overflow: hidden; 即可。

代码：

html { font-size: calc(100vw / 19.20); }  /* 1920/100=19.20 */
body { margin: 0; }
.app {
  width: 19.2rem;          /* 1920px 设计稿 */
  height: 10.8rem;         /* 1080px 设计稿 */
  max-width: 100vw;
  max-height: 100vh;
  margin: auto;
  overflow: hidden;
}

这样即使遇到 2560×720 的条形屏，宽度自动撑满，高度等比缩放，不会把文字压成“豆腐块”。

三、大屏必补的 6 个小细节

  1. 图片/视频
    背景视频用 1920×1080 30 fps H.264 baseline，码率 4 Mbps 以内，低端盒子不会掉帧。
    图标全部转 SVG，避免放大发虚。

  2. 字体
    中文用思源黑体、阿里巴巴普惠体，可商用，文件小。
    把字体文件放本地，别用在线字体，防止内网断网方块字。

  3. 渐变边框
    设计稿常见 1 px 渐变边框，用 border-image 不如直接 box-shadow: inset 0 0 0 1px linear-gradient(...)，性能更好。

  4. 数字滚动
    大屏 KPI 数字必须做“滚动动画”，用 requestAnimationFrame 手写或直接用 CountUp.js，别用 CSS transition，大数字会跳。

  5. 实时数据
    WebSocket 心跳 30 s 一次，断网 3 s 自动重连；
    数据返回空数组时，图表库要展示“- -”，不要画 0 轴，否则领导以为系统崩了。

  6. 现场调试快捷键
    F11 全屏、F12 隐藏控制台、Ctrl+Shift+R 清缓存，提前给运维写好小纸条，免得现场人手忙脚乱。

四、30 分钟最小可运行模板（Vue3 版，直接抄）

npm create vite bigscreen --template vue
cd bigscreen
npm i

main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@/styles/fit.scss'
createApp(App).mount('#app')

styles/fit.scss

// 路线 1：vw/vh 死锁
html,body,#app { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; }
.app {
  width: 100vw; height: 100vh;
  font-size: 1.5625vw;      // 30px 基准
  color: #fff;
  background: url(@/assets/bg.jpg) center/cover;
}

App.vue

<template>
  <div class="app">
    <div class="title">1920×1080 大屏</div>
  </div>
</template>

<style scoped>
.title {
  width: 19.2vw; height: 5.4vh;
  line-height: 5.4vh;
  text-align: center;
  background: rgba(0,0,0,.3);
}
</style>

npm run dev → 浏览器 F11 全屏 → 插电视 → 完工。

一句话总结
先确认终端真实像素，
能跑浏览器就“vw/vh 死锁”最快，
要打包 exe 就“rem+动态 scale”最稳，
遇到异形屏用“rem+vw 混合”。
按上面模板 30 min 就能把 1920×1080 设计稿 1:1 搬上大屏幕。

avatar
文章
阅读
粉丝