為了使網頁能夠適應任何移動裝置、桌面計算機的瀏覽器，提出了響應式網頁設計。
css3中的media query(媒介查詢)，是製作響應式布局的乙個利器，使用這個工具來快捷的製造出各種豐富的實用性強的介面。通過不同媒介型別和條件來定義樣式表規則，讓css可以更加精確作用於不同的媒介型別和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用於表達「大於或等於「和」小於或等於「。通過這個標籤屬性，可以方便的在不同的裝置下實現豐富的介面。
語法規則：
@media 裝置名 only (選取條件) not （選取條件）and (裝置選取條件)，裝置二{}
字元間用空格隔開，選取條件包含在小括號裡，css規則包含在大括號裡，多種裝置用逗號隔開。
為多種型別的螢幕設定樣式：
可以用到的裝置有：
可接受的引數：
在設定樣式表的時候，為了更好的顯示效果，還需要格式化一些css屬性的初始值：
/*禁用iphone中safari的字型大小自動調整*/
html//最大寬度為100%，如果超過了，就縮小，小了，就原尺寸輸出。
.video embed,.video object,.video iframe{
width:100%;
height:auto;
頁面的頭部需要加上：
這段標籤是告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。user-scalable=no 屬性可以解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。
由於ie瀏覽器不支援media queries，需要引用乙個media query j**ascript解決：
關於靜態布局、自適應布局、流式布局和響應式布局的區別：
靜態布局即傳統的web設計，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分，對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap或m。即固定頁面。
自適應布局分別為不同的螢幕解析度定義布局，布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨視窗大小的調整發生變化。位置變化，大小不變。
流式布局是頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。大小變化位置不變。
響應式布局能為不同的螢幕解析度定義布局，在 每個布局中應用流式分布的理念，即頁面元素寬度隨著視窗調整而自動適配。元素大小和位置均發生改變。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...