CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

さまざまなサイズのデバイスのさまざまなCSSスタイルルールのメディアクエリを設定する

さまざまなCSSスタイルルールのメディアクエリを設定するには、次のコードを実行してみてください-

例

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>
   <body>
      <p>If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color</p>
   </body>
</html>

  1. CSSのさまざまなメディアタイプ

    CSSメディアタイプは、ドキュメントがレンダリングされるデバイスタイプであり、すべてのメディアタイプに対して特定のスタイルを定義できます。 以下は、CSS3およびメディアクエリ4のメディアタイプです- Sr.No 値と説明 1 すべて スタイルシートはすべてのメディアタイプのデバイスに適用されます 2 印刷 スタイルシートはプリンターに適用されます 3 画面 スタイルシートは、コンピューターの画面、タブレット、スマートフォンなどに適用されます。 4 スピーチ スタイルシートは、ページを大声で「読み取る」スクリーンリーダーに適用

  2. CSSで一般的なデバイスブレークポイントにメディアクエリを使用するにはどうすればよいですか？

    CSSを使用して一般的なデバイスブレークポイントにメディアクエリを使用するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    body {       font-family: "Segoe UI", Tahoma,