真复古感必须用逐像素绘制，禁用CSS缩放与滤镜；固定320×240分辨率，CSS缩放+crisp-edges；限定8-bit色板；用monospace字体+setTimeout模拟CRT扫描；“404”手绘字符或SVG直线路径；禁用响应式，viewport锁定；音效需手势触发。
用 <canvas></canvas> 渲染像素网格，别依赖 CSS 滤镜
纯 CSS 的 pixel-art 伪类或 image-rendering: pixelated 在 Safari 和旧版 Chrome 上行为不一致，放大图片时容易模糊或插值。真复古感必须由 JS 控制每个像素点——用 <canvas></canvas> 手动绘制 8×8 或 16×16 像素块最稳。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设
<canvas width="320" height="240"></canvas>（模拟老式显示器宽高比），再用 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 动画做扫描线易卡顿且不可控，更可靠的是用 <pre class="brush:php;toolbar:false;"></pre> 标签配合 JS 逐行刷新文本内容，模拟老式终端的逐行渲染延迟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 字体选
font-family: 'Courier New', monospace;，字号设为16px（刚好对齐像素网格） - 在
<pre class="crt-text"></pre>里用\n分隔每行，JS 用setTimeout每 40ms 写入一行（模仿 25fps CRT 刷新） - 加一层半透黑
<div class="scanline">，背景用 <code>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 的设备，都会让像素块变形或模糊。复古页面不是响应式设计的适用场景——它本就是固定分辨率体验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
加<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">，强制锁定逻辑宽度 - 用
@media (min-resolution: 2dppx)单独覆盖高 DPR 设备的canvas绘制逻辑：调用devicePixelRatio放大 canvas 内部尺寸，但保持 CSS 尺寸不变，否则像素块会被浏览器二次缩放 - 别监听
resize事件重绘——一旦用户缩放，就让它错着，这是 CRT 时代的常态
最常被忽略的一点：音效。真正的复古终端遇到错误会有 “bip” 声，用
AudioContext播放 800Hz 方波（持续 50ms）比加 GIF 更有效。但这需要用户手势触发，所以放在点击“返回首页”按钮时播放，而不是页面加载就响——静音才是默认礼貌。 - 用
