html - 使用媒体查询在各种 h1 标题之间交换时具有语义

Question

我正在创建一个即将推出的页面，但希望 h1 标题随着屏幕宽度的变化而具有不同的标题。这是我的问题：

 <h1 class="hide1">HOLD ONTO YOUR HATS</h1>
 <h1 class="hide2">COMING SOON</h1>
 <h1 class="hide3">ON ITS WAY</h1>
 <h1 class="hide4">PENDING</h1>
 <h1 class="hide5">NIGH</h1>

...接着：

 @media only screen and (min-width : 1200px) {
      .hide2, .hide3, .hide4, .hide5 {
         display: none;
      }
 }

这一切都有点切碎和黑客攻击在一起。

有没有一种更语义化的方式来做到这一点，1，在源代码中隐藏其他 h1 和 2，从屏幕阅读器中隐藏其他 h1？

谢谢

编辑：标题有点混乱，所以它已经改变了

Answer 1

好吧，我似乎无法以一种有意义的方式质疑某些事情，我猜是将来要研究的事情。

因此，在过去几天的工作之后，我想我可能已经找到了一个不那么 hacky 的解决方案。

 <h1><span class="main__header--changer">COMING SOON</span></H1>

...和CSS

 @media (max-width: 75em) {
      h1:before {
           content: "HOLD ONTO YOUR HATS";
      }

      .main__header--changer {
           display: none;
      }
 }

唯一的问题是虽然屏幕阅读器将无法阅读标题。