hjr-h5手機頁面實現自適應佈局

首先頁面頂部加上style

<style>
    html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important;
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important;
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important;
        }
    }
</style>

• 所有寬度佈局都用百分比（因爲一般手機佈局都是左右各（50%），或寬度滿屏（100%），或者三個（30%）
• 所有高度都用rem（rem會根據頁面字體大小自動調整，上面的style內容就是爲了這個服務）
• 所有圖片都先隨便設置並不同組命名不同的class，最後統一用js處理，這樣能保持寬高比例不變，防止拉伸

 $(function(){ 
 $(".class").each(function(){
            var width = $(this).width();
            $(this).height(width*xxx);//這裏的xxx是比例，先計算原圖的寬高比，在這裏乘上
        });
});