關於響應式佈局

　　響應式佈局，就是一個網站可以相容多類型終端，但不是需要為每一個終端做一個特定的網頁版本。響應式佈局可以為不同終端的使用者提供更舒適的介面和使用者體驗，目前越來越多的大螢幕行動裝置的出現，響應式也隨之成為開發人員廣泛使用的WEB技術。

　　優點：

　　　　面對不同解析度設備彈性強

 

　　　　能夠快速解決多裝置顯示適應問題

　　缺點：

　　　　相容各種設備工作量大，效率低下

 

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

 

　　　　其實這是一種折中性質的設計解決方案，受多方面因素影響而達不到最佳效果

 

　　　　在某種程度上改變了網站原有的版面結構，會有使用者混淆的情況出現

　　說到響應式佈局，就不得不想到CSS3的Media Query，叫做媒介查詢，Media Query容易使用，便捷而且強大，是製作響應式佈局的以後一個利器，使用這個工具可以非常便捷的設計出各種既豐富又使用性很強的介面。

　　媒介查詢讓CSS可以更精確作用於不同的媒介類型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用於表達”大於或等於”和”小於或等於”。例如：width有min-width和max-width,可以用在CSS中的@media和@import規則上，也可以用在HTML和XML中。透過這個屬性，我們可以很方便的在不同的設備，特別是移動設備下實現豐富的介面，將會運用更加的廣泛。

 

　　用法與結構

　　　　1.在link中使用@media
　　　　　　

　　　　　　在以上的用法中，only可以省略，限於電腦顯示器。第一個條件中的max-width是指所要渲染的介面最大寬度，而max-device-width則是裝置的最大寬度。

 

　　　　2.在樣式表中內嵌@media

　　　　　　@media ( min-device-width:1024px ) and ( max-width:989px )，screen and ( max-device-width:480px )，( max-device-width:480px )，( max-device-d min-device-width:480px ) and ( max-device-width:1024px ) and ( orientation:portrait ) {}

　　　　　　　　在本實例中，設定了電腦顯示器解析度（寬度）大於或等於1024px（且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在480px以及橫向放置的手持裝置裝置；寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

 

 

　　　透過media query實現響應式佈局

　　　　首先先定義在標準瀏覽器下的固定寬度（假設瀏覽器解析度為1024px，寬為980px），然後用Media Query來監測瀏覽器的尺寸變化，當瀏覽器的解析度小於1024px的時候，則透過Media Query預設的樣式表來將頁面的寬度設定為百分比顯示，這樣子頁面的結構元素就會根據瀏覽器的尺寸來進行相對應的調整。同理，當瀏覽器的視覺部分改變到某個值的時候，頁面的結構元素會根據Media Query預設的層疊樣式表來進行相對應的調整。

　　　　我們也可以在頁面的中加入這個屬性是在行動裝置上設定原始大小顯示和是否縮放的聲明。

　　　　參數：

　　　　　　width – viewport的寬度

　　　　　　height – viewport的高度

　　　　　　initial-scale – 初始的縮放比例

　　　　　　minimum-scale – 允許使用者縮放到的最小比例

　　　　　　maximum-scale – 允許使用者縮放到的最大比例

　　　　　　user-scalable – 使用者是否可以手動縮放

　　　　media query在大部分瀏覽器中是被支援的，而在少部分瀏覽器則不受支持，例如IE瀏覽器，在使用時需要使用Media Query Javascript解決。