如何使用帶有'min-width”和'max-width”的'@media”查詢來實現一致的跨瀏覽器樣式？

使用@Media 和Min-Width 和Max-Width

在CSS 上下文中，@media 查詢允許您定位特定螢幕尺寸或具有不同風格的設備。然而，設定媒體查詢以在各種設備和瀏覽器上一致地工作可能具有挑戰性。

在您的例子中，您定義了三個 @media 規則：

@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}

雖然此設定有效在 iPhone 上，尚不清楚為什麼它不能在瀏覽器中運作。一個潛在的問題是您在元標記中使用“device”，並在第三條規則中使用“max-width”而不是“max-device-width”。

但是，建議的方法是定義不支援 @media 查詢的舊版瀏覽器的預設 CSS 樣式。然後，使用 @media 規則來針對特定的螢幕尺寸或具有其他樣式的裝置。例如：

/* Default styles for older browsers */
body {
  font-size: 14px;
}

/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 12px;
  }
}

遵循此方法，您可以確保與更廣泛的裝置和瀏覽器的相容性。

以上是如何使用帶有'min-width”和'max-width”的'@media”查詢來實現一致的跨瀏覽器樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！