帶有媒體查詢的響應式設計

第 16 講：帶有媒體查詢的響應式設計

在今天的講座中，我們將探索響應式設計以及如何使用媒體查詢讓您的網站在任何設備上看起來都很棒。在行動瀏覽時代，創建適應各種螢幕尺寸的佈局對於用戶體驗至關重要。

1.什麼是響應式設計？

響應式設計可確保網站調整其佈局、圖像和內容以適應不同的螢幕尺寸和方向。這種方法提高了從手機到大桌面螢幕等設備的可用性。

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。用於測試響應式設計的工具

• Google Chrome DevTools：您可以透過切換裝置模式來測試您的響應式設計。
• Firefox 中的響應式設計模式：另一個在不同螢幕尺寸上查看設計的好工具。
• 線上工具：我有回應嗎？ 或Screenfly等網站可讓您查看您的網站在不同裝置上的外觀。

結論

透過媒體查詢，創建在任何裝置上看起來都不錯的響應式設計變得非常簡單。無論您是調整佈局、調整圖像大小還是調整版式，媒體查詢都可以讓您靈活地建立適應不斷變化的數位環境的網站。

---

在 LinkedIn 上關注我

裡多伊‧哈桑

以上是帶有媒體查詢的響應式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！