如何让自定义CSS光标随页面渲染尺寸缩放并保持偏移比例？

目前CSS的cursor属性本身不支持动态缩放自定义光标图片，也不支持百分比单位的偏移量——偏移量只能用固定像素值，这是当前规范和浏览器实现的限制，MDN文档里也没有相关的缩放/自适应属性，也没有新增的浏览器特性能直接解决这个问题。下面是两种可行的处理方式：

一、预生成多尺寸光标（推荐，原生体验最佳） #

这是目前最可靠的方案，具体步骤：

• 提前制作不同分辨率的光标图片（比如16x16、24x24、32x32、48x48等，按比例保持指针点的位置）
• 使用CSS媒体查询，根据视口尺寸、设备像素比（DPI）切换对应的光标，同时按比例设置固定像素偏移量，保证指针点的比例一致。

示例代码：

/* 默认小尺寸光标，指针点在中心 */
body {
  cursor: url('./cursor-16.png') 8 8, grab;
}

/* 视口宽度≥1024px时，切换32px尺寸的光标，偏移量也按比例翻倍 */
@media (min-width: 1024px) {
  body {
    cursor: url('./cursor-32.png') 16 16, grab;
  }
}

/* 高DPI设备（比如Retina屏），使用高分辨率光标 */
@media (min-resolution: 2dppx) {
  body {
    cursor: url('./cursor-32.png') 16 16, grab;
  }
}

二、JS模拟光标（实现动态缩放，有局限性） #

如果不想预生成多图，可以通过隐藏原生光标，用DOM元素模拟自定义光标，实现动态缩放和比例偏移：

• 创建一个绝对定位的DOM元素，设置背景为光标图片，禁用指针事件（避免干扰页面交互）
• 监听鼠标移动事件，让元素跟随鼠标；监听窗口 resize 事件，根据视口尺寸动态调整缩放比例
• 通过调整元素的定位偏移或transform-origin，保证指针点的比例一致

示例代码：

.custom-cursor {
  position: fixed;
  width: 32px;
  height: 32px;
  background: url('./cursor.png') no-repeat center;
  background-size: contain;
  pointer-events: none; /* 不影响页面点击交互 */
  transform-origin: center; /* 缩放时以中心为基准，对应指针点 */
  z-index: 9999;
}

// 创建模拟光标元素
const cursorEl = document.createElement('div');
cursorEl.className = 'custom-cursor';
document.body.appendChild(cursorEl);

// 隐藏原生光标
document.body.style.cursor = 'none';

// 更新光标缩放比例
function updateCursorScale() {
  // 视口宽度>1200px时缩放1.5倍，可根据需求调整规则
  const scale = window.innerWidth > 1200 ? 1.5 : 1;
  cursorEl.style.transform = `scale(${scale})`;
}

// 让光标跟随鼠标移动，偏移量为尺寸的一半，保证指针在中心
document.addEventListener('mousemove', (e) => {
  const cursorSize = 32;
  cursorEl.style.left = `${e.clientX - cursorSize/2}px`;
  cursorEl.style.top = `${e.clientY - cursorSize/2}px`;
});

// 窗口大小变化时更新缩放比例
window.addEventListener('resize', updateCursorScale);
// 初始化缩放
updateCursorScale();

这种方案的局限性：模拟光标在文本选择、表单元素聚焦、右键菜单等场景下的表现不如原生光标，需要额外做兼容处理。

结论 #

如果追求原生兼容性和最佳体验，预生成多尺寸光标是唯一可靠的解决方案；如果可以接受模拟光标带来的小问题，JS方案可以实现动态缩放和比例偏移的需求。

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