詳解css media用法是什麼

在網站開發中，CSS的重要性不言而喻。我們可以透過CSS來為網站設定樣式、版面、字體等各種外觀屬性，讓網站呈現更具吸引力和易讀性的外觀。但是，不同的設備（如桌上型電腦、平板電腦、手機等）擁有不同的螢幕尺寸和分辨率，如果沒有針對不同設備的CSS樣式設置，網站顯示效果可能會相當不理想。

解決這個問題的方法之一是CSS Media Query（CSS媒體查詢）功能，該功能能夠針對不同的裝置編寫不同的CSS樣式。本文將深入介紹CSS Media Query的基本概念、文法和應用案例，讓你上手這項實用的技術。

什麼是CSS Media Query

CSS Media Query是一種在樣式表中嵌入的條件語句，用於指定不同螢幕尺寸和裝置類型套用不同的CSS樣式。透過CSS Media Query，我們可以實現響應式網站設計（Responsive Web Design），使網站在不同裝置上都能夠提供最佳的使用者體驗。

CSS Media Query部分是由媒體類型和媒體特性組成的，格式如下：

@media mediatype and|not|only (media feature) {
   CSS rules;
}

其中mediatype指定要套用CSS樣式的媒體類型，如screen、print、handheld等，而media feature指定要套用CSS樣式的媒體特性，如裝置寬度、裝置高度、方向等。

媒體類型

媒體類型是指用於呈現文件的裝置類型。常見的媒體類型包括：

• all：適用於所有裝置。
• print: 適用於印表機和列印預覽等輸出裝置。
• screen：適用於電腦螢幕、平板電腦、智慧型手機等螢幕裝置。
• handheld：適用於小螢幕的手持裝置（如智慧型手機）。
• speech：適用於螢幕閱讀器等聲音裝置。

媒體特性

媒體特性包含但不限於以下幾種：

• width：視口寬度，單位px。
• height：視口高度，單位px。
• device-width：裝置寬度。
• device-height：裝置高度。
• orientation：設備方向，landscape（橫向）或portrait（垂直）。
• aspect-ratio：視口寬度與高度的比例。
• color：裝置顏色位深。
• resolution:設備分辨率，單位dpi。

透過上述兩種組合，我們可以針對不同裝置類型和螢幕屬性，定義不同的CSS樣式。

CSS Media Query的使用範例

以下是一些特定的CSS Media Query使用範例，涉及針對不同裝置和螢幕特性的客製化樣式。

1.針對不同裝置類型設定不同樣式

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

上面兩段CSS程式碼分別針對電腦螢幕和智慧型手機螢幕，套用不同的背景顏色。

2.針對裝置方向設定不同樣式

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

上面兩段CSS程式碼針對裝置方向（橫向或垂直），設定不同的背景顏色。

3.針對視窗寬度設定不同樣式

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

上面兩段CSS程式碼是基於視窗寬度，套用不同的字體大小。

4.結合多種條件

當然在實際使用中，根據具體情況需要結合多種條件。例如，我們要設定一個適用於智慧型手機的logo圖片，但只有當裝置的視口寬度小於等於800px時才生效。這時候可以使用如下的程式碼：

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

在這段CSS程式碼中，我們使用了handheld and (max-device-width: 800px)和(-webkit- min-device-pixel-ratio: 1.5)兩個條件。前者指定設備為手持設備，且設備視口寬度小於800px。後者相容了WebKit渲染引擎，指定裝置像素比大於1.5。

總結

CSS Media Query功能是響應式網站設計的重要組成部分，可以幫助我們為不同裝置類型和螢幕特性編寫不同的CSS樣式。透過本文的介紹，你應該已經了解到CSS Media Query的基本概念、語法和應用方法，並可以運用它們為你的網站設計提供更精細和個性化的樣式。

以上是詳解css media用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！