メディアクエリを使用したレスポンシブデザイン

レクチャー 16: メディア クエリを使用したレスポンシブ デザイン

今日の講義では、レスポンシブ デザインと、メディア クエリを使用してどのデバイスでも Web サイトを美しく表示する方法について説明します。モバイル ブラウジングの時代では、さまざまな画面サイズに適応するレイアウトを作成することがユーザー エクスペリエンスにとって不可欠です。

1.レスポンシブデザインとは何ですか?

レスポンシブ デザインにより、Web サイトはさまざまな画面サイズや方向に合わせてレイアウト、画像、コンテンツを調整できます。このアプローチにより、携帯電話から大きなデスクトップ画面まで、さまざまなデバイスでの使いやすさが向上します。

2.メディアクエリとは何ですか?

メディア クエリは、画面サイズ、方向、解像度などの要素に基づいて条件付きでスタイルを適用できる CSS 機能です。これらは、ユーザーの環境に「応答する」デザインを作成するのに役立ちます。

3.基本的なメディア クエリ構文

メディア クエリの構文は簡単です。条件 (デバイスの幅など) を指定し、それらの条件が満たされた場合に適用するスタイルを記述します。

例:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

この例では、画面幅が 600px 以下の場合、ページの背景色が水色に変わります。

4.レスポンシブ デザインの一般的なブレークポイント

ブレークポイントは、レイアウトを変更する特定の画面幅です。すべてのプロジェクトは固有ですが、レスポンシブ デザインで使用される標準ブレークポイントをいくつか示します:

• 超小型デバイス (電話): 最大幅: 600px
• 小型デバイス (タブレット): 最大幅: 768px
• 中型デバイス (小型ラップトップ): 最大幅: 992px
• 大型デバイス (デスクトップ): 最大幅: 1200px

例:

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
}
@media (max-width: 992px) {
    .container {
        padding: 30px;
    }
}

この例では、.container クラスのパディングは画面サイズに基づいて変更されます。タブレットでは 20px、小型ラップトップでは 30px になります。

5.メディアクエリを使用してレイアウトを調整する

メディア クエリを使用して要素のレイアウトを調整し、小型デバイスでも要素をよりアクセスしやすく、見た目も美しくすることができます。

例:

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.flex-container {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
}

この例では、.flex-container 内のアイテムは大きな画面では水平に配置されますが、768px 以下の画面では垂直に積み重ねられます。

6.画像のメディア クエリ

レスポンシブデザインを構築する場合、画像も適応させる必要があります。メディア クエリを使用すると、画面サイズに応じて画像のサイズを変更できます。

例:

img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    img {
        width: 80%;
    }
}

ここで、画像は大きな画面ではコンテナの幅の 100% を占めますが、768px 以下の画面では 80%.

7.方向ベースのメディア クエリ

デバイスの向き (縦または横) に基づいてスタイルを調整することもできます。これは、頻繁に回転するタブレットやスマートフォンなどのデバイスに役立ちます。

例:

@media (orientation: landscape) {
    .header {
        background-color: darkblue;
    }
}

この場合、デバイスが横向きモードの場合、ヘッダーの背景色が変わります。

8.レスポンシブ タイポグラフィ

レスポンシブ タイポグラフィは、テキストをすべてのデバイスで読みやすい状態に保つために非常に重要です。メディア クエリを使用すると、画面サイズに基づいてフォント サイズを調整できます。

例:

body {
    font-size: 16px;
}

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

これにより、

600px より小さい画面ではフォント サイズが 14px に縮小され、テキストがモバイル ユーザーにより適したものになります。

9.複数のメディア クエリの結合

複数のメディア クエリを組み合わせて、非常に具体的なスタイリング条件を作成できます。

例:

@media (min-width: 600px) and (max-width: 768px) {
    .container {
        padding: 15px;
        background-color: lightgreen;
    }
}

これにより、画面サイズが

600px から 768px までの場合にのみスタイルが適用されます。

10. Alat untuk Menguji Reka Bentuk Responsif

• Google Chrome DevTools: Anda boleh menguji reka bentuk responsif anda dengan menogol mod peranti.
• Mod Reka Bentuk Responsif dalam Firefox: Satu lagi alat hebat untuk melihat reka bentuk anda pada saiz skrin yang berbeza.
• Alat Dalam Talian: Tapak web seperti Adakah Saya Responsif? atau Screenfly membolehkan anda melihat penampilan tapak web anda pada peranti yang berbeza.

Kesimpulan

Dengan pertanyaan media, mencipta reka bentuk responsif yang kelihatan baik pada mana-mana peranti menjadi mudah. Sama ada anda melaraskan reka letak, mengubah saiz imej atau mengubah suai tipografi, pertanyaan media memberi anda fleksibiliti untuk membina tapak web yang menyesuaikan diri dengan landskap digital yang sentiasa berubah.

---

Ikuti saya di LinkedIn

Ridoy Hasan

以上がメディアクエリを使用したレスポンシブデザインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。