前端知識點整理系列（一）—— 響應式布局

今天整理關于響應式布局的知識。響應式布局這個名詞現在應該已經很熟悉了，随着移動端的普及，我們的網站的使用者體驗需要提升，響應式布局可以解決我們的問題。

什麼是響應式布局？

簡單點說，就是同一個頁面可以适應不同的螢幕大小裝置的設計方案，做一個網站同時能相容多個終端，通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端裝置寬度在多少像素内，然後就執行與之對應的CSS樣式。

布局及設定meta标簽

當建立一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小。如果完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實作響應式特性。在手機裝置上，我們要禁止使用者來縮放螢幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。是以，我們要通過代碼來禁止使用者在手機端上縮放螢幕，已達到正常的手機網站效果。

通過媒體查詢來設定樣式media query

media query 是響應式設計的核心，它能夠和浏覽器進行溝通，告訴浏覽器頁面如何呈現，假如一個終端的分辨率小于980px，那麼可以這樣寫，這個時候的布局會覆寫掉之前設定的布局。

@media screen and (max-width:px){
     #head { … }
     #content { … }
     #footer { … }
}
           

設定多種視圖寬度

假如我們要相容ipad和iphone視圖，我們可以這樣設定：

/**ipad**/
@media only screen and (min-width:px)and(max-width:px){

}
/**iphone**/
@media only screen and (width:px)and (width:px){

}
           

響應式的圖檔

• 大圖随容器縮放，保持寬高比
• max-width: 100%;

#wrap img{
        max-width:%;
        height:auto;
    }
           

如此設定後ID為wrap内的圖檔會根據wrap的寬度改變已達到等寬擴充，height為auto的設定是為了保證圖檔原始的高寬比例，以至于圖檔不會失真。