继续点击 - 仅 html、css - 媒体查询

问题描述

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

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

谢谢

    <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%;
  }
}

解决方法

在 html 中创建一个额外的“链接”

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

...
        <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;
    }
  }