Cargo网站移动端专属CSS自定义：解决页眉与图片适配问题

核心思路是用CSS媒体查询（Media Queries），它能针对特定屏幕尺寸范围应用样式，完全不会影响桌面端的原有布局。

一、调整移动端页眉的字体大小与位置 #

先确定你的移动端断点（比如常用的768px，即屏幕宽度≤768px时判定为移动端），然后在媒体查询内单独写页眉的样式：

/* 桌面端原有样式保持不变 */
header {
  font-size: 24px;
  /* 其他桌面端样式 */
}

/* 仅针对移动端的样式 */
@media screen and (max-width: 768px) {
  header {
    /* 调整字体大小 */
    font-size: 18px;
    /* 调整位置，比如用margin控制上下左右间距 */
    margin-top: 10px;
    margin-left: 15px;
    /* 如果是flex布局的页眉，可调整对齐方式 */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

根据你的实际布局，修改margin、flex属性或者用position定位都可以，这些样式只会在屏幕宽度≤768px时生效。

二、修复移动端图片拥挤堆叠问题 #

同样用媒体查询，针对图片或图片容器设置自适应规则：

方案1：让单张图片自适应屏幕宽度 #

/* 桌面端图片样式保持不变 */
.post img {
  width: 600px;
  height: auto;
}

/* 移动端图片自适应 */
@media screen and (max-width: 768px) {
  .post img {
    /* 最大宽度不超过父容器 */
    max-width: 100%;
    /* 高度自动比例缩放 */
    height: auto;
    /* 可选：添加上下间距避免拥挤 */
    margin: 10px 0;
  }
}

方案2：调整多图布局（比如网格/浮动布局） #

如果是多张图片用网格或浮动排列导致堆叠，可在移动端改为单列布局：

/* 桌面端多图网格布局 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 移动端改为单列 */
@media screen and (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

注意事项 #

• 断点值可以根据你的需求修改，比如用375px针对手机小屏，1024px针对平板大屏。
• 媒体查询的样式要写在桌面端样式之后，确保优先级覆盖（如果有冲突的话）。

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