スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適用できることです。特定のプロパティは特定のメディアにのみ適用されます。たとえば、「font-size」プロパティはスクロール可能なメディア タイプ (画面) にのみ適用されます。 メディア属性を宣言するには、@import または @media を使用できます。
ドキュメントのマークアップにメディアを含めることもできます。 SCREEN: コンピュータの画面を指します。 モバイルフレンドリーな@mediaスタイルの使用 一般的な携帯電話のスタイル: @media all および (orientation : 縦向き) { /*縦画面*/ } @media all および (orientation : landscape) { /*横画面*/ } 携帯電話の高さのスタイルを指定します:
さまざまなデバイスに応じて設定されるスタイル:
順番に注意してください。下に @media (min-width: 768px) と書くと悲劇になります。CSS ファイルは上から下に読み込まれるため、後の CSS の方が優先されるからです。
なぜなら、1440 の場合、1440>768 なので、1200 は無効になります。 したがって、min-width を使用すると、小さい方が上に、大きい方が下になります。同様に、max-width を使用すると、大きい方が上に、小さい方が下になります。
この記事はここで終わります |
<<: 選択ドロップダウンメニューのテキストを左右にスクロールするように設定する
>>: Reactでwindow.print()を使用した際にページが応答しなくなる問題の解決記録について
これまでの仕事では、開発サーバーは一般的にTomcatでした。データソースは、多くの場合、appli...
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...
Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能...
新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...
目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...
Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
目次Vueのコアコンセプトを理解するVueの双方向バインディングの原理と実装を探るVue 双方向バイ...
この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...
目次単項演算子ブール演算子乗算演算子加法演算子関係演算子等価演算子条件演算子代入演算子カンマ演算子要...
目次MySQL 複数インスタンスマルチインスタンスの概要マルチインスタンスとは何ですか?複数のインス...
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...