響應式佈局，就是一個網站可以相容多類型終端，但不是需要為每一個終端做一個特定的網頁版本。響應式佈局可以為不同終端的用戶提供更舒適的界面和用戶體驗，目前越來越多的大屏幕移動設備的出現，響應式也隨之成為開發人員廣泛使用的WEB技術。 優點： 面對不同解析度設備靈活性強 能夠快捷解決多設備顯示適應問題 缺 ...
響應式佈局，就是一個網站可以相容多類型終端，但不是需要為每一個終端做一個特定的網頁版本。響應式佈局可以為不同終端的用戶提供更舒適的界面和用戶體驗，目前越來越多的大屏幕移動設備的出現，響應式也隨之成為開發人員廣泛使用的WEB技術。
優點：
面對不同解析度設備靈活性強 能夠快捷解決多設備顯示適應問題 缺點： 相容各種設備工作量大，效率低下 代碼累贅，會出現隱藏且無用的元素，載入時間會加長 其實這是一種折中性質的設計解決方案，受多方面因素影響而達不到最佳效果 在一定程度上改變了網站原有的佈局結構，會有用戶混淆的情況出現 說到響應式佈局，就不得不想到CSS3的Media Query，叫做媒介查詢，Media Query容易使用，便捷而且強大，是製作響應式佈局的以後一個利器，使用這個工具可以非常便捷的設計出各種既豐富又使用性很強的界面。 媒介查詢讓CSS可以更精確作用於不同的媒介類型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用於表達”大於或等於”和”小於或等於”。比如：width有min-width和max-width,可以用在CSS中的@media和@import規則上，也可以用在HTML和XML中。通過這個屬性，我們可以很方便的在不同的設備，特別是移動設備下實現豐富的界面，將會運用更加的廣泛。 用法與結構 1.在link中使用@media<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/> 在以上的用法中，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 ) and ( orientation:landscape )，( 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預設的層疊樣式表來進行相對應的調整。 我們也可以在頁面的<head></head>中加入<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>這個屬性是在移動設備上設置原始大小顯示和是否縮放的聲明。 參數： width – viewport的寬度 height – viewport的高度 initial-scale – 初始的縮放比例 minimum-scale – 允許用戶縮放到的最小比例 maximum-scale – 允許用戶縮放到的最大比例 user-scalable – 用戶是否可以手動縮放 media query在大部分瀏覽器中是被支持的，而在少部分瀏覽器則不受支持，比如IE瀏覽器，在使用時需要使用Media Query Javascript解決。 <!–[if lt IE 9]> <script src=”../../css3-mediaqueries.js”></script> <![endif]–>
