CSS 媒體查詢屬性詳解：@media 與 min-width/max-width

CSS 媒體查詢屬性詳解：@media 和min-width/max-width

在現代的web開發中，裝置的螢幕大小和解析度多種多樣化。為了實現更好的使用者體驗，我們常常需要根據裝置的不同來調整網頁的樣式和佈局。 CSS媒體查詢屬性是一種強大的工具，可以幫助我們根據裝置的特性來動態地套用不同樣式。本文將詳細介紹@media規則以及min-width和max-width屬性，並給出具體的程式碼範例。

@media規則是CSS中用於媒體查詢的關鍵字。透過使用@media規則，我們可以根據不同的媒體類型和條件來套用不同的樣式。媒體類型可以是screen（螢幕），print（列印）或speech（語音合成）等。而條件可以是設備的寬度、高度、解析度等。

在媒體查詢中，常用的條件屬性是min-width和max-width。 min-width表示設備的最小寬度，而max-width表示設備的最大寬度。透過這兩個屬性，我們可以實現簡單的響應式佈局。下面是一個範例：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  h1 {
    font-size: 24px;
  }
  p {
    font-size: 18px;
  }
}

上面的程式碼表示，當裝置的寬度在768px和1024px之間時，會套用定義的樣式。在這個範例中，body的背景色會變成淺藍色，而h1和p的字體大小也會相應地調整。

除了min-width和max-width屬性外，還可以使用其他的條件屬性來實現更複雜的媒體查詢。例如，我們可以使用min-device-width和max-device-width來基於裝置的實際寬度進行查詢。

@media screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 样式定义 */
}

另一個常用的條件屬性是orientation，用來判斷裝置的方向是橫向還是縱向。

@media screen and (orientation: landscape) {
  /* 横向样式定义 */
}

@media screen and (orientation: portrait) {
  /* 纵向样式定义 */
}

媒體查詢屬性可以嵌套使用，以實現更精細的樣式調整。例如，我們可以在一個媒體查詢中再嵌套另一個媒體查詢，同時結合多個條件屬性，滿足特定的佈局需求。

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
  
  @media (orientation: landscape) {
    h1 {
      font-size: 24px;
      margin-top: 20px;
    }
    p {
      font-size: 18px;
    }
  }
  
  @media (orientation: portrait) {
    h1 {
      font-size: 18px;
      margin-top: 10px;
    }
    p {
      font-size: 14px;
    }
  }
}

範例中，當裝置寬度在768px和1024px之間時，根據裝置方向分別套用不同的樣式。

總結一下，CSS媒體查詢屬性是一種靈活強大的工具，可以根據裝置特性來動態地調整網頁樣式和佈局。透過使用@media規則和min-width/max-width等條件屬性，我們可以輕鬆實現響應式佈局，提升使用者體驗。在實際開發中，我們可以根據具體需求來選擇合適的媒體查詢屬性，並結合嵌套使用，以實現精細的樣式調整。希望以上內容對你理解媒體查詢屬性有幫助。

以上是CSS 媒體查詢屬性詳解：@media 與 min-width/max-width的詳細內容。更多資訊請關注PHP中文網其他相關文章！