真复古感必须用逐像素绘制，禁用CSS缩放与滤镜；固定320×240分辨率，CSS缩放+crisp-edges；限定8-bit色板；用monospace字体+setTimeout模拟CRT扫描；“404”手绘字符或SVG直线路径；禁用响应式，viewport锁定；音效需手势触发。

用 渲染像素网格，别依赖 CSS 滤镜

纯 CSS 的 pixel-art 伪类或 image-rendering: pixelated 在 Safari 和旧版 Chrome 上行为不一致，放大图片时容易模糊或插值。真复古感必须由 JS 控制每个像素点——用 手动绘制 8×8 或 16×16 像素块最稳。

实操建议：

• 设 （模拟老式显示器宽高比），再用 CSS 缩放： canvas { width: 640px; height: 480px; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
• 避免用 ctx.drawImage() 缩放位图，改用 ctx.fillRect(x, y, 1, 1) 逐像素写入——这样哪怕缩放到 2000%，边缘也锐利
• 颜色必须限定在 #000000、#ff00ff、#00ffff 这类经典 8-bit 调色板，别用渐变或半透明

用 monospace 字体 + 字符动画模拟 CRT 扫描线

“复古”不只靠像素块，还得有动态错觉。CSS 动画做扫描线易卡顿且不可控，更可靠的是用

标签配合 JS 逐行刷新文本内容，模拟老式终端的逐行渲染延迟。

实操建议：

• 字体选 font-family: 'Courier New', monospace;，字号设为 16px（刚好对齐像素网格）
• 在
  里用 \n 分隔每行，JS 用 setTimeout 每 40ms 写入一行（模仿 25fps CRT 刷新）
• 加一层半透黑
  ，背景用 repeating-linear-gradient(transparent 1px, rgba(0,0,0,0.2) 1px, rgba(0,0,0,0.2) 2px)，高度设为 100vh 并用 animation: scan 8s linear infinite 向下移动

  404 文字要手绘，别用现成字体文件

  任何 WebFont（哪怕是 “Press Start 2P”）加载失败就回退到系统字体，瞬间破功。真正的复古页面应把 “404” 当作图形来处理——用 canvas 绘制，或用 SVG path 描边，确保离线也能显示。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  实操建议：

  • 用 ctx.font = 'bold 48px monospace' + ctx.fillText('404', x, y) 是捷径，但字符边缘会抗锯齿；更准的做法是提前定义一个 8×8 字符集对象，比如 charMap['4'] = [[0,1,1,1,0],[1,0,0,0,1],...]，再循环 fillRect
  • 如果用 SVG，路径不要转曲，保留直线段和 45° 角（例如 M10 20 L30 20 L30 40 L20 40 L20 30 L10 30 Z），避免 smooth 或 bezier 曲线
  • 文字阴影别用 text-shadow，改用偏移后重绘两次：先画黑底白字，再向右下偏 1px 画红字，模拟老电视偏色

  响应式断点会毁掉像素感，直接禁用缩放

  移动端双指缩放、横竖屏切换、DPR > 1 的设备，都会让像素块变形或模糊。复古页面不是响应式设计的适用场景——它本就是固定分辨率体验。

  实操建议：

  • 在 加 ，强制锁定逻辑宽度
  • 用 @media (min-resolution: 2dppx) 单独覆盖高 DPR 设备的 canvas 绘制逻辑：调用 devicePixelRatio 放大 canvas 内部尺寸，但保持 CSS 尺寸不变，否则像素块会被浏览器二次缩放
  • 别监听 resize 事件重绘——一旦用户缩放，就让它错着，这是 CRT 时代的常态

  最常被忽略的一点：音效。真正的复古终端遇到错误会有 “bip” 声，用 AudioContext 播放 800Hz 方波（持续 50ms）比加 GIF 更有效。但这需要用户手势触发，所以放在点击“返回首页”按钮时播放，而不是页面加载就响——静音才是默认礼貌。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！