手机页面的前端开发

1.元素使用rem单位(相对于html的font-size，单位px)

/* 自动调节页面适配 */
$(function(){
    (function(){
        var oContainer = $('#container');//body下的640px的容器 margin: 0 auto
        var oHtml = $('html').eq(0);
        changeHtmlFontSize();
        function changeHtmlFontSize(){
            var oContainerWidth = oContainer.outerWidth();
            oHtml.css('font-size',oContainerWidth/40+'px');
        }
        $(window).resize(function(){
            changeHtmlFontSize();
        })
    })()    
})    

2.元素使用em单位（相对于自身的font-size，单位px）

#example {
    font-size: calc(100vw / 32);   //vw 即view-width的意思
}
@media (min- 640px){
    #example {
        font-size: 20px;
    }
}
@media (max- 320px){
    #example {
        font-size: 10px;
    }
}

媒体查询样式的条件 可以使用 and 满足想要的范围

注意：手机页面都要加上这个

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">