移动端网页自适应解决方案

1.使用rem作为尺寸单位

2.案例代码：

//根据不同设备设置不同大小
$(function(){

    //resize():当调整浏览器窗口大小时，发生resize事件
    $(document).ready(function(){
        updata_html_size(7.527);
    });

    //ready():当DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，发生ready事件
    $(document).resize(function(){
        updata_html_size(7.527);
    });

    //init_size=选择的参考手机宽度/当前设置的html标签中的font-size大小
    function updata_html_size(init_size){
        var width = $(window).width();
        if(width>=640)    //根据需要设置大小
        {
            width = 640;
        }
        var w = width/init_size;
        $('html').css('font-size',w.toFixed(2)+'px');
    }

})
           

 腾讯规范代码案例：

<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>