手機頁面的前端開發

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-width: 640px){
    #example {
        font-size: 20px;
    }
}
@media (max-width: 320px){
    #example {
        font-size: 10px;
    }
}

媒體查詢樣式的條件 可以使用 and 滿足想要的范圍

注意：手機頁面都要加上這個

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