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是比例，先计算原图的宽高比，在这里乘上
        });
});