使用styled-components实现响应式grid时小于768px第二列消失问题

问题根因 #

你的响应式布局异常是三个核心问题导致的：

1. AboutWrapper 容器写死了固定高度height: 900px，当屏幕宽度小于1100px时布局切换为上下单列排列，两列内容总高度超过900px，第二列内容被截断超出可视范围，呈现消失的效果。
2. 现有布局的单列切换断点设置为1100px，和你预期的768px断点不符。
3. Img 样式存在语法错误：margin: 0 0 10px 10; 最后一个值缺少单位，可能引发额外的布局偏移。

修复方案 #

1. 修改AboutWrapper容器高度 #

将固定高度改为最小高度，允许容器随内容自动撑开：

export const AboutWrapper = styled.div`
  display: grid;
  z-index: 1;
  // 替换固定height为min-height
  min-height: 900px;
  width: 100%;
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 24px;
  justify-content: center;
  // 移动端添加底部内边距避免内容贴边
  @media screen and (max-width: 768px) {
    padding-bottom: 40px;
  }
`

2. 调整响应式断点（可选，按需使用） #

如果需要768px以下才切换为单列布局，修改AboutRow的媒体查询条件：

export const AboutRow = styled.div`
  display: grid;
  grid-auto-columns: minmax(auto, 1fr);
  align-items: center;
  grid-template-areas: 'col1 col2';
  // 将原有1100px断点改为768px
  @media screen and (max-width: 768px) {
    grid-template-areas: 'col1' 'col2';
  }
`

3. 修正Img样式语法错误 #

export const Img = styled.img`
  width: 100%;
  // 补全margin最后一个值的单位px
  margin: 0 0 10px 10px;
  background: #010606;
  padding-right: 0;
`

修改完成后重新运行项目即可看到移动端第二列内容正常显示，布局会随屏幕尺寸自适应调整。

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