怎麼用CSS3媒體查詢

css3的媒體查詢功能，使得響應式布局得以實現，其實基本原理還是用css3媒體查詢（media/meta）功能查出裝置的尺寸，然後寫出不同的尺寸寫出或者覆蓋css樣式，使得介面看起來變換了。接下來就和大家說一下怎麼用CSS3媒體查詢。

esponsive Web Design

將已有的開發技巧（彈性網格布局、彈性圖片、媒體和媒體查詢）

整合起來，命名為響應式網頁設計

是一種針對任意裝置對網頁內容進行“完美”布局的一種顯示機制。

簡言之，是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。

優勢

多終端視覺和操作體驗非常風格統一

相容當前及未來新裝置

響應式web設計中的大部分技術可以用在WebApp開發中

節約了開發成本，維護成本也降低很多

不足

相容性：低版本瀏覽器安全色性有問題

移動頻寬流量：相比較手機定製網站，流量稍大，

但比較載入一個完整pc端網站顯然是小得多

代碼累贅，會出現隱藏無用的元素，載入時間加長

相容各種裝置工作量大

移動優先

在設計的初期就要考慮的頁面如何在多終端顯示

漸進增強

充分發揮硬體裝置的最大功能

適用什嗎？

對於重內容的網站，例如形象展示，則比較適合使用響應式web設計

不適用什嗎？

對於重功能的網站，如電子商務類，則更推薦使用獨立移動網站

CSS3-media Query（媒體查詢）

javascript

第三方開源架構

Bootstrap

常見的屬性操作

device-width/device-height 裝置螢幕寬高

width/height （渲染視窗寬度）實際顯示寬度

resolution 裝置解析度

orientation 裝置方向

portrait/landscape 豎屏或橫屏

initial-scale 設定頁面初始縮放比例（0-10.0）

user-scalable 設定使用者是否可以縮放（yes/no）

minimum-scale 設定最小縮小比例（0-10.0）

maximum-scale 設定最大放大比例（0-10.0）

關於媒體查詢的知識就這麼多了，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3的text-shadow字型陰影怎麼使用

怎麼選擇合適的HTML標籤

html裡div置中需要注意哪些