ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS メディア クエリ: さまざまなデバイスや画面サイズにさまざまなスタイルを適用します。
CSS メディア クエリは、Web デザインにおいて非常に便利なテクニックで、さまざまなデバイスや画面サイズに応じてさまざまなスタイルを適用できます。メディア クエリを通じて、コンピューター、タブレット、携帯電話などのユーザーが使用するデバイスの種類や、画面の幅や高さなどの要素に基づいて Web ページのレイアウトと外観を調整し、より良いコンテンツを提供できます。ユーザー体験。
CSS メディア クエリを使用する前に、いくつかの基本的な概念と使用法を理解する必要があります。まず、メディア クエリは CSS3 の機能であることを明確にする必要があるため、ブラウザが適切に動作するには CSS3 をサポートする必要があります。
メディア クエリは @media ルールを使用して定義され、通常は最初に読み込まれるように CSS ファイルの先頭に記述されます。メディア クエリの構文は次のとおりです:
@media mediatype と (条件) {
CSS style
}
このうち、mediatype はメディア タイプを表します。いくつかのタイプがあります:
条件部分はメディア クエリの中核であり、条件を満たすデバイスまたは画面サイズをフィルターで除外するために使用されます。条件には、一般的に使用される次の属性を含めることができます:
メディア クエリを使用してさまざまなデバイスや画面サイズに適応する方法を示す具体的なコード例をいくつか示します:
@メディア画面と (min-width: 1200px) {
/ 画面幅が 1200px 以上の場合に適用されるスタイル {
font-size: 18px;}
}
/
画面幅が 767px/ 以下の場合に適用されるスタイル body {
font-size: 14px;}
}
/
横向きで表示される場合に適用されるスタイル/ 本体 {
background-color: yellow;}
}
/
画面幅が 768px ~ 1199px の場合に適用されるスタイル / body {
font-size: 16px;}
}
以上がCSS メディア クエリ: さまざまなデバイスや画面サイズにさまざまなスタイルを適用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。