如何降低网站整体分辨率以复刻90年代老旧网站视觉效果

方案1：CSS双缩放像素化（无JS依赖，优先选择） #

核心原理是先将页面固定到目标低分辨率尺寸，再按比例放大到适配当前视口，禁用浏览器的平滑插值实现像素化降采样效果，代码如下：

/* 全局样式 */
* {
  /* 避免子元素的抗锯齿抵消像素化效果 */
  image-rendering: inherit;
}
body {
  /* 90年代主流设备分辨率，可自行调整为640*480等更低规格 */
  width: 800px;
  height: 600px;
  margin: 0;
  overflow-x: hidden;
  /* 缩放基点固定在左上角，避免内容偏移 */
  transform-origin: 0 0;
  /* 按视口宽度动态计算缩放比例，如需适配高度可改为min(calc(100vw/800), calc(100vh/600)) */
  transform: scale(calc(100vw / 800));
  /* 核心属性：强制像素化渲染，取消平滑缩放 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

使用该方案只需直接把代码加入全局样式即可，适配所有现代浏览器，无额外性能损耗。

方案2：Canvas低分辨率渲染（效果更可控） #

如果需要更贴近老设备的降采样质感，可将整个页面内容绘制到低分辨率Canvas再放大显示，代码片段如下：

// 配置目标低分辨率
const LOW_RES_WIDTH = 800;
const LOW_RES_HEIGHT = 600;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas的实际尺寸为低分辨率
canvas.width = LOW_RES_WIDTH;
canvas.height = LOW_RES_HEIGHT;
// 展示尺寸拉伸到全屏
canvas.style.width = '100vw';
canvas.style.height = '100vh';
canvas.style.imageRendering = 'pixelated';
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.zIndex = 9999;
document.body.appendChild(canvas);

// 逐帧渲染页面内容到低清canvas
function renderLoop() {
  // 需配合html2canvas工具实现页面转图片
  html2canvas(document.body, {
    width: LOW_RES_WIDTH,
    height: LOW_RES_HEIGHT,
    useCORS: true
  }).then(pageImg => {
    ctx.clearRect(0, 0, LOW_RES_WIDTH, LOW_RES_HEIGHT);
    ctx.drawImage(pageImg, 0, 0, LOW_RES_WIDTH, LOW_RES_HEIGHT);
  });
  requestAnimationFrame(renderLoop);
}
renderLoop();

该方案适合静态内容为主的站点，可额外叠加扫描线、色彩偏移等CRT显示器特效，复古还原度更高。

额外优化建议 #

• 全局统一使用12px-14px的小号字体，配合像素化渲染可实现90年代点阵字体效果
• 避免使用圆角、渐变、阴影等现代CSS属性，所有元素保持直角、纯色填充的设计风格
• 可叠加filter: contrast(1.1) saturate(0.7) brightness(0.9)模拟老显示器的偏色、低对比度效果

内容的提问来源于stack exchange，提问作者Natalius