从零搭建 Astro 博客踩坑实录（二）：响应式布局的那些坑

前言

博客上线后发现手机上显示异常，左侧黑色块遮挡、内容错位…这大概是每个前端开发者都会遇到的老朋友了。

布局设计回顾

设计了三套布局：

设备	断点	布局
电脑	> 1024px	三栏（260px左 + 主内容 + 260px右）
平板	768-1024px	两栏（220px左 + 主内容）
手机	< 768px	单栏 + 侧栏显示

坑一：手机端侧边栏消失

现象

博客页面手机端正常，但首页左侧有一块黑色区域，侧边栏内容不显示。

原因

在响应式样式中写了：

@media (max-width: 768px) {
    .sidebar-left,
    .sidebar-right {
        display: none;  /* 隐藏了！ */
    }
}

但实际上手机端应该显示侧边栏，只是需要调整样式。

解决方案

@media (max-width: 768px) {
    .sidebar-left,
    .sidebar-right {
        display: block;  /* 显示出来 */
        padding: 1rem 0;
    }
    /* 调整顺序：左侧栏在上，内容在中，右侧栏在下 */
    .sidebar-left { order: -1; }
    .main-content { order: 0; }
    .sidebar-right { order: 1; }
}

坑二：Hero 背景覆盖整个页面

现象

手机端打开首页，整个页面被深色背景覆盖，看不到正文内容。

原因

Hero 样式中有：

.hero {
    background-attachment: fixed;  /* 这个在移动端不兼容 */
    height: 100vh;
}

background-attachment: fixed 在 iOS Safari 和部分 Android 浏览器上会出问题，而且 100vh 在移动端会超出屏幕高度。

解决方案

/* 手机端单独处理 */
@media (max-width: 768px) {
    .hero {
        background-attachment: scroll;  /* 改成滚动 */
        height: 280px;  /* 固定高度 */
    }
    .hero-title {
        font-size: 1.5rem;  /* 标题也调小 */
    }
}

教训总结

不要盲目隐藏手机端的元素：改成调整样式更好
慎用 background-attachment: fixed：移动端兼容性差
vh 单位在移动端的坑：可以用 min-height 或 calc() 替代

完整响应式样式参考

/* 电脑端：最大宽度限制 */
@media (min-width: 1400px) {
    .page-wrapper {
        max-width: 1600px;
        gap: 3rem;
    }
}

/* 平板：隐藏右侧栏 */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-wrapper {
        grid-template-columns: 220px 1fr;
        gap: 1.5rem;
    }
    .sidebar-right {
        display: none;
    }
}

/* 手机：全宽显示 */
@media (max-width: 768px) {
    .page-wrapper {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    .sidebar-left,
    .sidebar-right {
        display: block;
    }
}

响应式是个老生常谈的话题，但每次踩坑都有新的收获。下一篇文章聊聊 Astro 组件开发的经验。

前言

布局设计回顾

坑一：手机端侧边栏消失

现象

原因

解决方案

坑二：Hero 背景覆盖整个页面

现象

原因

解决方案

教训总结

完整响应式样式参考

相关推荐