モバイルビューで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
. これがあなたの助けになることを願っています。
関連
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み】あるdivの上に別のdivを重ねる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSレイアウト例】CSSで中央揃えを実現する方法N種
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
フロントエンドの落とし穴 リソースはスタイルシートとして解釈されるが、MIMEタイプはtext/htmlで転送される。"<URL>". css スタイルの失敗
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css