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

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

寬度與高度

區塊寬度一般用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; } } 

?