如何实现响应式可点击图标：适配不同屏幕尺寸的悬浮阴影按钮

✅ 构建语义化且具备可访问性的HTML结构

✅ 实现响应式CSS样式（媒体查询与弹性布局）

/* 基础样式：采用相对单位与现代布局模型 */
.shortcut-link {
  display: inline-block;
  text-decoration: none;
}

.card {
  transition: box-shadow 0.3s ease;
  width: clamp(80px, 12vw, 155px);   /* 响应式宽度控制：最小80px，最大155px，中间值按视口宽度12%动态计算 */
  height: clamp(24px, 7.5vw, 48px);  /* 保持协调的宽高比 */
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 确保图标完整显示，避免被拉伸或裁剪 */
}

.card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
              0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* 多断点精细化响应式优化（推荐替代单一的 max-width:600px 方案） */
@media (max-width: 768px) {
  .card {
    width: clamp(70px, 15vw, 120px);
    height: clamp(20px, 8.5vw, 40px);
  }
}

@media (max-width: 480px) {
  .card {
    width: clamp(60px, 20vw, 100px);
    height: clamp(18px, 10vw, 32px);
  }
}