詳解CSS3特性 Media如何實現響應式設計

2023年響應式設計已經成為國外**的一項標配功能，國內越來越多的開發人員開始關注響應式設計，2023年相信國內更多的**也將使用響應式設計，因為利用css3特性@media將很簡單就能實現響應式設計，一次開發同時能在手機，平板，pc桌面等不同解析度的裝置下擁有較好的瀏覽體驗。

在 css2 中，你可以為不同的媒介裝置（如螢幕、印表機）指定專用的樣式表，而現在借助 css3 的特性@media，可以更為有效的實現這個功能。你可以為媒介型別新增某些條件，檢測裝置並採用不同的樣式表。

例如，你可以把用於大螢幕上顯示的樣式和用於移動裝置的專用樣式放在乙個樣式文件中，這樣，在不改變文件內容的情況下，不同的裝置可以呈現不同的介面外觀。閱讀這篇文章學習你將學習@media的基本功能和國外使用 css3 的 media queries 特性的優秀**案例。

在開始學習之前，本站為您提供了簡單的示例，調整你的瀏覽器視窗大小，看看有什麼變化。

最大寬度：max-width

下面的樣式會在可視區域的寬度小於 600px 的時候被應用。

@media screen and (max-width: 600px) 
}

如果你想鏈結到乙個單獨的樣式表，把下面的**放在標籤裡。

最小寬度：min-width

下面的樣式會在可視區域的寬度大於 900px 的時候被應用。

@media screen and (min-width: 900px) 
}

多條件查詢

你還可以使用過個匹配條件，下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。

@media screen and (min-width: 600px) and (max-width: 900px) 
}

裝置實際解析度max-device-width

@media screen and (max-device-width: 480px) 
}

@media優秀的特性不支援ie9以下的版本

附：css3特性瀏覽器相容性表

以下的**需要使用瀏覽器ie9+, firefox, chrome 和 safari才能看到響應式設計的特點。

**：hicksdesign

**：colly

頁面的布局會根據瀏覽器的尺寸在1列，2列和4列之間切換。

**：a list apart

為移動裝置優化了樣式表並不意味著你的**就適合在移動裝置顯示了。要做到真正的移動裝置優化，要削減影象大小、標籤數量和載入的資源尺寸等等。css3 media queries 是用於設計的呈現，而不是優化。