0

約 10 個のリンクを含むフッターがあり、ビューポートが 320px 以下の場合、そのフッターを変更して 2 つのリンクのみを表示したいと考えています。どうすればそれを行うことができますか？誰もが良い参考文献を持っていますか（私はGoogleにどのように/何をするか確信が持てませんでした）。

これは、javascript を介して dom 要素を作成する必要がある状況ですか?

4

3 に答える 3

1

それぞれがリンクに個別のクラスを持っている場合は、メディア クエリでそれらをターゲットにするだけで、javascript は必要ありません。

<footer>
  <a href="" class="link1">Link here</a>
  <a href="" class="link2">Link here</a>
  <a href="" class="link3">Link here</a>
  ...
  <a href="" class="link10">Link here</a>
</footer>

@media (max-width: 320px) {
   .link1,.link2,.link3 {
      display: none;
   }
}
于 2013-05-20T22:07:15.313 に答える
1

このような状況では JavaScript を使用しないようにします。css3 には、メディア クエリと呼ばれる機能が組み込まれています。これにより、条件を確認し、それらの条件が満たされた場合にのみ特定のスタイルを適用できます。それらは次のように定義されます

@media (max-width:320px){
     ...
}

この場合、メディア クエリの条件チェックは、ドキュメントの「ビューポート」の幅が 320px 未満であり、メディア クエリ タグ内に配置した CSS を適用します (また、1 つのメディア クエリ内に複数の CSS スタイルをネストすることもできます)。

スタイル シートにメディア クエリを挿入し、これらのモバイル非表示リンクにクラスを指定し、次のように何も表示しないように設定します。

@media (max-width:320px){
     .mobileHidden{
        display:none;
     }
}

さらに読みたい場合は、mozilla 開発者ネットワークにメディアクエリに関する記事があります。メディア クエリの使用は、通常、「レスポンシブ Web デザイン」として知られており、最新の Web ブラウザーで問題なく動作するはずです。

于 2013-05-20T22:07:42.607 に答える