css3的媒體查詢功能，使得響應式佈局得以實現，其實基本原理還是用css3媒體查詢（media/meta）功能查出設備的尺寸，然後寫出不同的尺寸寫出或覆蓋css樣式，使得介面看起來變換了。接下來就跟大家說一下怎麼用CSS3媒體查詢。
esponsive Web Design
整合起來，命名為響應式網頁設計
是一種針對任意裝置對網頁內容進行「完美」佈局的一種顯示機制。
簡言之，是一個網站能夠相容於多個終端機－而不是為每個終端做一個特定的版本。
優勢
多終端視覺和操作體驗非常風格統一
相容於當前及未來新設備
響應式web設計中的大部分技術可以用在WebApp開發中
節約了開發成本，維護成本也降低很多
不足
相容性：低版本瀏覽器相容性有問題
行動頻寬流量：相比較手機客製網站，流量稍大，
但比較載入一個完整pc端網站顯然是小得多
程式碼累贅，會出現隱藏無用的元素，載入時間加長
相容於各種裝置工作量大
行動優先
在設計的初期就要考慮的頁面如何在多端顯示
#漸進增強
充分發揮硬體設備的最大功能
適用什麼？
對於重內容的網站，例如形象展示，則比較適合使用響應式web設計
不適用什麼？
對於重功能的網站，如電子商務類，則更建議使用獨立行動網站
CSS3-media Query（媒體查詢）
第三方開源框架
常見的屬性操作
#device-width/ device-height 裝置螢幕寬度高
width/height （渲染視窗寬度）實際顯示寬度
resolution 以裝置方向上
portrait /landscape 正在螢幕或橫向螢幕
initial-scale 設定使用者是否可縮放（yes/no）
minimum-scale 設定最小縮小比例（0-10.0）
maximum-scale #工作關於最大放大比例（0#-10.0）110.0）就設定了這麼多媒體設定為最大放大比例（0#-10.0）的知識（0#> ，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3的text-shadow字體陰影怎麼使用 怎麼選擇合適的HTML標籤html裡div居中需要注意哪些以上是怎麼用CSS3媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！
