作品集网站响应式失效求助：移动端无法切换布局并隐藏信息区

问题场景 #

开发个人作品集网站时，设定响应式布局规则：

• 桌面端：5列Grid布局，左侧3列展示作品（.TRAVAUX），右侧2列放置信息区域（.CONTACT）
• 移动端（屏幕宽度≤600px）：切换为3列布局，同时隐藏右侧信息区

测试环境中布局功能正常，但迁移至实际网站后响应式完全失效——移动端仍显示5列布局，信息区未被隐藏。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Design graphique & éditorial, Lyon (FR).">
    <meta name="keywords" content="Design graphique, Design éditorial, HTML, CSS">
    <meta name="author" content="Jérémy Antonin">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jérémy Antonin</title>
    <link rel="icon" type="image/x-icon" href="images/favicon.png">
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<div class="container">
  <div class="TRAVAUX">
    <mark><a id="23" class="anchor">fig. 05 — </a></mark>
    <div>
        <img src="images/travaux2.png" class="travaux">
    </div>
    <div>
        <p><small>infos — </small><strong>die fragilität der adoleszenz<br>en collaboration avec milica milojkovic, édition<br>20 p., 148 × 210 mm, risographie, 2023</strong></p>
    </div>
    <mark><a id="22" class="anchor">fig. 05 — </a></mark>
    <div>
        <img src="images/travaux2.png" class="travaux">
    </div>
  </div>
  <div class="CONTACT">
                 <nav>
        <mark><a id="categorie" class="categorie">travaux — </a></mark>
        <a href="#23" class="anchor-link retrait1 retrait">23</a>
    </nav>
    <div class="info">
    <div>
    <p><small>contact — </small><strong>jérémy antonin<br>design éditorial & interfaces graphiques<br>x<br>x<br>x</strong></p>
    </div>
    <div>
        <p><small>formations — </small><strong>2017—2024<br>2022—2024, dna design graphique, ensba lyon.<br>2019—2022, dnmade numérique, esaa lmd, lyon.<br>2017—2019, baccalauréat std2a, hemingway, nîmes.</strong></p>
    </div>
    <div>
        <p><small>expériences — </small><strong>stages<br>2023, graphiste, extra l’agence, lyon.<br>2021, graphiste, extra l’agence, lyon.<br>2021, direction artistique, bonjour paris, paris.<br>2020, création audiovisuelle, alchimeo, lyon.</strong><br><small style="color: white;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;</small><strong>workshops<br>2023, typographies minuscules, sandrine nugue.<br>2022, design génératif, lionel radisson.<br>2022, typographies matricielles, marie lécrivain.<br>2022, créations éditoriales, félicité landrivon.<br>2022, créations 3d c4d, julie gaudin.<br>2021, glyphs, bonjour monde.</strong></p>
    </div>
    <div>
        <p><small>collaborations — </small><strong>2023<br>quand la ville dort, maël le magourou<br>die fragilität der adoleszenz, milica milojkovic<br>linuscule, ange billard<br>instruments 도구, sayu song<br>chats коти, kristina khoma</strong></p>
    </div>
</div>


</body>
</html>

CSS代码 #

body {
  margin: 10px;
  line-height: 1.1;
}

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "TRAVAUX TRAVAUX TRAVAUX CONTACT CONTACT";
}

.TRAVAUX {
  grid-area: TRAVAUX;
  display: block;
}

.CONTACT {
  grid-area: CONTACT;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "TRAVAUX TRAVAUX TRAVAUX";
  }
}

section {
  display: block;
  height: 100%;
  max-width: 100%;
  width: 100vw;
  font-family: serif;
  font-weight: normal;
  font-size: 14px;
}

.selected {
  background-color: black;
  color: white;
}

.info {
  position: fixed;
  right:10px;
  top:20px;
  font-family: serif;
  font-size: 14px;
  font-weight: normal;
}

nav {
  position: fixed;
  right:36.5em;
  font-family: serif;
  font-size: 14px;
  font-weight: normal;
}

.anchor-link {
  display: block;
  padding-bottom: 5px;
  text-underline: none;
  text-decoration: none;
  color: black;
}

.categorie {
  padding-right: 50px;
}

.anchor {
  padding-right: 50px;
}

.travaux {
  max-width: 100%;
  position: relative;
  padding-left: 50px;
}

.retrait {
  position: relative;
  margin-left: 25px;
  text-underline: none;
  text-decoration: none;
  color: black;
}

.retrait1 {
  margin-top: 5px;
}

mark {
  background-color: black;
  color: white;
}

p {
  margin-bottom: 50px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 22px;
}

small {
  font-family: serif;
  font-size: 14px;
  font-weight: normal;
}

strong {
  padding-left: 30px;
}

问题根源 #

1. fixed定位脱离Grid控制：.info和nav使用position: fixed，会完全脱离Grid容器的布局流，因此即使修改Grid的grid-template-areas，这两个元素依然会固定显示在页面中，不受Grid布局规则约束。
2. 未显式隐藏信息区：当前媒体查询仅调整了Grid列数和布局区域，但未对.CONTACT容器添加隐藏规则，导致信息区始终可见。
3. 媒体查询规则优先级问题：若存在其他更高优先级的CSS规则（如内嵌样式、ID选择器），可能覆盖媒体查询中的Grid布局设置。

修复方案 #

1. 完善媒体查询规则 #

在移动端媒体查询中，添加.CONTACT的隐藏规则，同时确保Grid布局生效：

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "TRAVAUX TRAVAUX TRAVAUX";
  }
  /* 直接隐藏整个信息区容器 */
  .CONTACT {
    display: none;
  }
}

2. 优化fixed定位元素的响应式适配（可选） #

若需要在移动端保留导航功能，可单独为fixed元素设置移动端样式，使其脱离fixed定位：

@media only screen and (max-width: 600px) {
  nav {
    position: static;
    margin: 10px 0;
    right: auto;
  }
  /* 根据需求调整其他fixed元素样式 */
}

3. 验证样式优先级 #

通过浏览器开发者工具检查.container元素的计算样式，确认媒体查询中的Grid规则是否被其他样式覆盖。若存在优先级冲突，可使用!important（仅临时调试，不推荐长期使用）或提升选择器优先级（如使用.container.mobile类名）解决。

内容的提问来源于stack exchange，提问作者Jérémy A.