CSS媒體查詢：針對不同裝置和螢幕尺寸套用不同的樣式

CSS媒體查詢是一種在網頁設計中非常有用的技術，它允許我們根據不同的裝置和螢幕尺寸應用不同的樣式。透過媒體查詢，我們可以根據使用者所使用的裝置類型，如電腦、平板或手機，以及螢幕寬度和高度等因素來調整網頁的佈局和外觀，以提供更好的使用者體驗。

在使用CSS媒體查詢之前，我們需要先了解一些基本的概念和用法。首先，我們需要明確媒體查詢是CSS3的功能，因此要求瀏覽器支援CSS3才能正常運作。

媒體查詢使用@media規則來定義，通常寫在CSS檔案的頂部，以便優先載入。媒體查詢的語法如下所示：

@media mediatype and (條件) {
CSS樣式
}

其中，mediatype表示媒體類型，常見的媒體類型有以下幾種：

• all：適用於所有媒體設備；
• screen：適用於電腦螢幕；
• print：適用於印表機和列印預覽；
• handheld：適用於手持設備，如手機和平板電腦。

條件部分是媒體查詢的核心，透過條件篩選出符合條件的裝置或螢幕尺寸。條件可以包括以下幾種常用的屬性：

• width：螢幕寬度；
• height：螢幕高度；
• device-width：裝置寬度；
• device-height：裝置高度；
• orientation：螢幕方向；
• aspect-ratio：螢幕寬高比；
• resolution：螢幕解析度。

以下是一些特定的程式碼範例，展示如何使用媒體查詢來適應不同裝置和螢幕尺寸：

1. 針對大螢幕裝置套用特定樣式：

@media screen and (min-width: 1200px) {
/ 在螢幕寬度大於等於1200px時套用的樣式/
body {

  font-size: 18px;

}
}

2. 針對小螢幕裝置套用特定樣式：

@media screen and (max-width: 767px) {
/ 在螢幕寬度小於等於767px時套用的樣式/
body {

  font-size: 14px;

}
}

3. 針對橫螢幕顯示套用特定樣式：

@media screen and (orientation: landscape) {
/ 在橫螢幕顯示時套用的樣式/
body {

  background-color: yellow;

}
}

4. 結合多個條件使用媒體查詢：

@media screen and (min-width: 768px) and (max-width: 1199px) {
/ 在螢幕寬度在768px和1199px之間時所應用的樣式/
body {

  font-size: 16px;

}
}

#透過以上範例，我們可以看到，媒體查詢可以根據不同的裝置和螢幕尺寸應用不同的樣式，從而實現網頁的響應式設計。透過靈活運用媒體查詢，我們可以為不同的裝置使用者提供更好的使用體驗，無論是在電腦、平板或手機上都能獲得良好的介面展示效果。

當然，媒體查詢只是響應式設計中的一部分，還需要結合其他技術和實踐來完成完整的響應式網頁設計。在實際應用中，我們可以根據專案需求和使用者群體來選擇合適的媒體查詢條件，並編寫對應的CSS樣式，以實現效果最佳的響應式設計。

以上是CSS媒體查詢：針對不同裝置和螢幕尺寸套用不同的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！