特定の画面サイズ用の CSS メディア クエリを作成するにはどうすればよいですか?

レスポンシブ レイアウトの CSS メディア クエリを理解する

問題:

さまざまな画面に適応する Web サイトの作成サイズが難しい場合があります。開発者は、この応答性を実現するための CSS メディア クエリの実装に苦労することがよくあります。

質問:

開発者は、レイアウト互換性のための CSS メディア クエリの作成に関する支援を求めています。次の画面サイズ:

• 640x480
• 800x600
• 1024x768
• 1280x1024 (およびそれ以上)

答え:

特定の画面サイズのメディア クエリ:

これらの特定の画面サイズのメディア クエリを作成するには、次の構文を使用します。

@media screen and (max-width: 640px) {
  /* Styles for screens up to 640px wide */
}

@media screen and (max-width: 800px) {
  /* Styles for screens up to 800px wide */
}

@media screen and (max-width: 1024px) {
  /* Styles for screens up to 1024px wide */
}

@media screen and (min-width: 1280px) {
  /* Styles for screens 1280px wide and larger */
}

追加の考慮事項:

• 応答性を向上させるには、ピクセルの代わりに em 値を使用します。
• デバイス固有のメディア クエリの使用を検討してください (デバイスの互換性を最適化するには、iPhone、iPad など)。
• 標準デバイスのメディア クエリの包括的なリストを参照してください: http://css-tricks.com/snippets/css/media-queries-for- standard-devices/

使用例:

/* Smartphones (portrait and landscape) ----------- */
@media screen and (min-width : 320px) and (max-width : 480px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media screen and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

/* Laptops and desktops ----------- */
@media screen and (min-width : 1224px) {
  /* Styles */
}

以上が特定の画面サイズ用の CSS メディア クエリを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。