一、设置视口（Viewport）元标签

<head>
  <!-- 强制浏览器视口宽度等于设备屏幕宽度，且初始缩放比例为 1 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 其它 head 内容… -->
</head>
  • width=device-width 告诉浏览器：页面的布局宽度（CSS 宽度）应当与设备屏幕的物理像素宽度相匹配，而不是默认的“桌面视口”宽度（通常约980px）。
  • initial-scale=1 指定页面加载时的初始缩放比例为 100%，不进行自动缩放。

为什么必须要它？ 没有这个标签，手机浏览器会把页面当成桌面页面来渲染，自动按比例缩放整个页面以适应屏幕，结果不会触发 CSS 媒体查询，也就无法实现真正的响应式布局。

二、利用 Bootstrap 的响应式栅格

你的友链卡片使用了 Bootstrap 的 .row + .col-md-6 col-lg-4，它本身已经具备响应式能力：

  • 在 ≥992px（lg）时，每行 3 列
  • 在 ≥768px 且 <992px（md）时，每行 2 列
  • 在 <768px 时，每行自动铺满（1 列）

无需特别修改。如果想在超小屏（<576px）时更留白，可加上自定义 padding：

@media (max-width: 576px) {
  .col-md-6.col-lg-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

三、针对手机端放大字体与图片

在全局 CSS 或模板顶部 <style> 中，加入如下媒体查询，用以放大文字和头像，让触控更舒服：

@media (max-width: 768px) {
  /* 卡片内部整体增大间距 */
  .bf-grid-item {
    padding: 1rem;
  }

  /* 标题和描述文字放大 */
  .bf-name {
    font-size: 1rem;           /* 原 h6 大小约0.875rem，这里放大 */
  }
  .bf-desc {
    font-size: 0.9rem;         /* 更易阅读 */
  }

  /* 头像放大 */
  .bf-avatar img {
    width: 64px !important;
    height: 64px !important;
  }

  /* 分类标题放大 */
  .bf-category-title {
    font-size: 1.25rem;
  }
}
  • !important 能确保覆盖内联或其他第三方样式。
  • 根据实际视觉效果，可以微调 64px、1rem、1.25rem 等值。

四、优化卡片排版

清晰的左右排版在手机上更易阅读，将头像和文字横向排列、文字多行展开：

@media (max-width: 768px) {
  .bf-grid-item .d-flex {
    flex-direction: row;       /* 确保头像在左，文字在右 */
    align-items: center;
  }

  .bf-meta {
    margin-left: 1rem;
  }

  /* 取消文字截断，让描述多行显示 */
  .bf-meta h3,
  .bf-meta p {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

五、增强触控体验

给卡片更多的点击区域和视觉反馈，让用户点得更准：

@media (max-width: 768px) {
  .bf-grid-item.card {
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform .15s ease;
  }
  .bf-grid-item.card:hover {
    transform: translateY(-3px);
  }
}

六、测试与调试

  1. 使用真机或浏览器模拟
  • Chrome DevTools → Toggle Device Toolbar → 选择常见手机型号
  1. 清除缓存
  • 有时浏览器会缓存 CSS，确保在调试时进行“硬刷新”（Ctrl + Shift + R）
  1. 调整断点
  • 在 DevTools 中可临时编辑媒体查询条件（比如 max-width: 600px），验证不同屏幕下的样式变化

通过以上步骤，你的友链界面在手机端就会：

  • 自动适配窄屏布局（1 列卡片）
  • 字体和头像更大、更易阅读和触控
  • 卡片排版更清晰，触控反馈更友好