单击移动 - html，仅 css - 媒体查询

Question

我的菜单项上有一个 link，id 在属于它的文本的 h2 上。我想做的一切都很简单——当我点击菜单中的某个项目时，我希望它向下移动到属于它的文本。简单。

我把它放在左边，旁边是文本。当分辨率低于 479px 时，“侧面菜单”位于顶部，文本位于其下方。而我想让它做的只是当它在这个分辨率下时 - 跳转到文本（h2）。什么时候并排就可以了，当然没有必要这样做。所以我的问题是.. 是否可以仅通过使用 html 和 css 以某种方式这样做？要使其仅在低于 479px 时才工作（“跳跃”）？媒体查询不知何故？

谢谢你

    <section id="budova">
          <div class="materials">
          <div class="container">
            <h1>BUDOVA (izolace)</h1>
            <div class="materials-container">
            <div class="kategorie">
            <a href="#produkty"><h2 data-kategorie="#silsonic" class="active">Silsonic</h2></a>
            <h2 data-kategorie="#mappysil400">Mappysil CR 400</h2>
            <h2 data-kategorie="#mappysil404">Mappysil CR 404</h2>
            <h2 data-kategorie="#polistik">Polistik / M under special HQ</h2>
            <h2 data-kategorie="#pavisol">Pavisol</h2>
            <h2 data-kategorie="#mappysilent">Mappysilent</h2>
            <h2 data-kategorie="#fonosilent">Fonosilent</h2>
            <h2 data-kategorie="#bugnato">Mappysil CR Bugnato</h2>
            <h2 data-kategorie="#mappysil-re">Mappysil CR RE</h2>
            <h2 data-kategorie="#mappypren">Mappypren AU</h2>
            <h2 data-kategorie="#stopfire">Stopfire Bugnato</h2>
          </div>
    
          <div class="produkty" id="produkty">
            <div id="silsonic" class="active">
              <h3>Silsonic</h3>
              <img src="./img/materials/budova/silsonic.jpg" alt="Silsonic">
              <p>Cena od 150 kč vč. DPH</p>
              <p>v 40/š 600/d 1200 mm ( ostatní rozměry v sekci ceník )</p>
              <p>SILSONIC je termoizolační a akusticky absorpční materiál vyrobený z tepelně zpracovaných, recyklovaných polyesterových vláken. Panely SILSONIC se používají k tepelné a zvukové izolaci všech druhů zdiva, sádrokartonových konstrukcí, stropů a pro podstřešní izolace.</p>
              </div>
.
.
. 
more text

CSS

.materials-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 3rem 0;
}
.materials h1 {
  text-align: center;
  padding: 6rem 0 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  border-bottom: 1px solid;
  width: 90%;
  margin: auto;
}
.kategorie {
  background-color: #c4c4c4;
  text-align: center;
  padding: 1rem 0;
  border-radius: 10px;
  margin-bottom: 8rem;
}
.produkty {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-left: 10rem;
}
.produkty div {
  display: none;
}

.produkty div.active {
  display: initial;
}
.produkty h4 {
  text-transform: uppercase;
  margin-top: 3rem;
}
.produkty p:first-of-type,
.produkty p:nth-of-type(2) {
  font-weight: 600;
}
.produkty img {
  max-width: 300px;
}
.materials {
  padding-bottom: 40px;
}
.materials p {
  line-height: 24px;
}
.materials h1 {
  margin-bottom: 5rem;
}
.materials h2 {
  width: 70%;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0.8rem 0;
  border-bottom: 1px solid transparent;
  margin: 0 auto;
  transition: all 0.3s;
}
.materials h2:hover {
  border-bottom: 1px solid #fff;
  color: #fff;
}
@media (max-width: 479px) {
  .main-text p {
    line-height: 2rem;
  }
  .main-text h1 {
    padding: 4rem 0 0.5rem;
  }
  .photos img {
    width: 60%;
    margin: auto;
  }
  .photos {
    height: 160px;
  }
  .nav-menu .logo {
    width: 53%;
    height: 52px;
  }
  .materials-container {
    display: block;
  }
  .materials h2 {
    font-size: 1.2rem;
  }
  .kategorie {
    margin-bottom: 5rem;
  }
  #fonosilent {
    width: 100%;
  }
}

Answer 1

在 html

中添加一个额外的“link”

在小屏幕上，一个将被隐藏（没有跳转到 link 的那个），而另一个（带有锚标签和跳转到）将被显示。

...
        <div class="kategorie">
        <a href="#produkty" class="small-screen"><h2 data-kategorie="#silsonic" class="active">Silsonic</h2></a>
        <h2 data-kategorie="#silconic" class="active big-screen">Silsonic</h2>
...

css 中的媒体查询：

@media (max-width: 479px) {
    .big-screen {
      display: none;
    }
    .small-screen {
      display: grid/flex/whatever;
    }
  }
@media (min-width: 480px) {
    .big-screen {
      display: grid/flex/whatever;
    }
    .small-screen {
      display: none;
    }
  }

单击移动 - html，仅 css - 媒体查询

Move on click - html, css only - media queries

css

menu

hyperlink

media-queries