第九十五節，移動流體佈局和響應式佈局總結

移動流體佈局和響應式佈局總結

寬度與高度

區塊寬度通常用max-width 最大寬度和百分比，來定義寬度，由於要實現自動縮放

高度若是要自適應，就不須要定義高度，或者定義最小高度

注意：橫向的儘可能用百分比，如邊距等

 

圖片自適應

 

保證小於圖片分辨率的手機，自適應等寬屏幕

 

圖片必定要可以自適應等比例縮放 才能保證佈局的 正確性。

 

方法：將圖片的img標籤轉換成區塊，將最大寬度設置爲100%，這樣圖片就會自適應了

img{
    display: block;
    max-width: 100%;
}

媒體查詢

手機網站通常媒體查詢都是控制字體大小

響應式網站，媒體查詢要控制字體大小，和寬度高度，以及區塊隱藏等

媒體查詢是手機網站和自適應網站的重要部分，媒體查詢能夠根據不一樣的屏幕大小，作響應的處理，如文字的大小，區塊隱藏等等

    /*媒體查詢，大於480小於640*/ 
    @media (min-width:480px) and (max-width:640px) { 
        #tour h2 { 
            font-size: .26rem; 
        } 
        #tour h3 { 
            font-size: .16rem; 
        } 
        #footer { 
            font-size: .14rem; 
        } 
    } 

    /*媒體查詢，小於480*/ 
    @media (max-width:480px) { 
        #tour h2 { 
            font-size: .18rem; 
        } 
        #tour h3 { 
            font-size: .14rem; 
        } 
        #footer { 
            font-size: .12rem; 
        } 
    }