さまざまな画面サイズに効果的な CSS メディア クエリを作成するにはどうすればよいですか?

画面サイズの CSS メディア クエリ: 総合ガイド

多様な画面サイズにシームレスに適応するレイアウトの開発は、最新のレスポンシブ デザインの基礎です。このテクニックを習得するには、CSS メディア クエリを理解し効果的に利用することが最も重要です。

画面サイズの定義

このシナリオでは、ターゲットの画面サイズがリストされています。形式:

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

書き込み効果的なメディア クエリ

ウィンドウの幅に応じて調整されるレイアウトを作成するには、メディア クエリが使用されます。提供されているコード サンプルにはメディア クエリが含まれていますが、正しく構成されていません。これは修正です:

改訂されたメディア クエリ:

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

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

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

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

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

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

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

追加リソース:

• 出典: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• 応答値: https://zellwk.com/blog/media-query-units/

結論:

適切なメディア クエリを利用することで、デザイナーはレスポンシブ レイアウトを作成できますさまざまな画面サイズに簡単に適応し、複数のデバイス間で最適なユーザー エクスペリエンスを保証します。

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