怎麼用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                          以裝置方向上

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中文網其他相關文章！