0

近日公開予定のページを作成していますが、画面の幅が変わると 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 を非表示にする、よりセマンティックな方法はありますか?

ありがとう

追記：タイトルがややこしかったので変更しました

4

1 に答える 1

0

わかりました、意味のある方法で何かに疑問を呈することができないようです。将来的に取り組むべきことだと思います。

したがって、過去数日間それに取り組んだ後、ハックの少ない解決策を見つけたのではないかと思います。

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

ただし、スクリーン リーダーはヘッダーを読み取ることができません。

于 2013-02-22T15:31:58.330 に答える