-2

liモバイル解像度で非表示にするにはどうすればよいですか? 幅の解像度が 600 未満の場合 (例: ) アイテムを非表示にするclass="txt-menu"

私のHTML：

<li>
    <a href="#">TITLE MENU</a>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href=""><img src="my-image_instead_of_menu-text"></a></li>
        <li><a href="" class="txt-menu">my text intead of menu image</li><br>
    </ul>
</li>

ありがとう！

4

4 に答える 4

2

メディアクエリを使用すると、問題が解決します。
モバイル解像度の場合、次のコードを使用できます。

@media only screen and (max-width: 599px) { 
    .txt-menu {
       display:none; 
    }

また; レスポンシブデザインを見てみましょう。

于 2013-04-08T14:00:14.357 に答える
1

これ自体には JavaScript は必要ありません。スタイルを特定の環境プロパティにのみ適用するように制限できます。

@media only screen and (max-device-width: 700px)
    li.text-menu {
        display: none;
    }
}
于 2013-04-08T13:59:55.647 に答える
0

モバイルの解像度を確認して非表示にするには、css のみを使用する必要があります<a>。

@media (max-width: 767px) {
   li a.txt-menu{display:none;}
}
于 2013-04-08T14:01:43.557 に答える
0

jquery のhide()メソッドを使用して、HTML 要素を非表示にすることができます。しかし、私が理解していることから、人がモバイルからページにアクセスした場合、基本的にメニュータイプを変更したいと考えています。その場合は、手動で変更するのではなく、レスポンシブ CSS フレームワークを検討する必要があります。

例：

  1. Twitter ブートストラップ
  2. ガンビー
  3. レスポンシブ グリッド システム

それでも別のルートを取り、肩にもっと仕事を置きたい場合は、次を使用してモバイルデバイスを検出し、それに応じて処理を行うことができます。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    /* Hide LI's here */
}

がここにありますJSFiddle

于 2013-04-08T13:59:04.307 に答える