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

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

Patricia Arquette

リリース： 2024-11-25 13:46:11

オリジナル

751 人が閲覧しました

How to Write Effective CSS Media Queries for Different Screen Sizes?

画面サイズの 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 */
}

ログイン後にコピー

追加リソース: