1. ホーム
  2. css

モバイルビューでdivタグを隠すには?

2023-10-17 03:47:02

質問

サイト用のフルードレイアウトを作成しています。の内容を非表示にしようとしています。 <div> または全体の <div> を表示させることができます。

今のところ、こんな感じです...。

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

モバイルレイアウトでは表示を「なし」にして、タブレット/デスクトップのレイアウトではブロックに設定しているのですが...。もっと簡単な方法があるのでしょうか、それともそれでしょうか?

どのように解決するのですか?

2つのものが必要です。 1つ目は @media screen を使用して、特定の画面サイズで特定のコードをアクティブにします。レスポンシブデザインに使用されます。 2つ目は visibility: hidden 属性の使用です。 ブラウザ/スクリーンが600pixelsに達したら、次に #title_message は隠されます。

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

編集: モバイル用の別のCSSを使用している場合は、モバイル用のCSSを追加するだけです。 visibility: hidden; を追加してください。 #title_message . これがあなたの助けになることを願っています。