实现自适应页面的方法,适合APP开发

来源:互联网 发布:淘宝基础版全屏店招 编辑:程序博客网 时间:2024/06/04 18:13
实现自适应设置jq方法:(要引用jq)
var width=$(window).width()
    var size=width/10
    size = size +"px"
    $("html").css("font-size",size)
    $(window).resize(function() {
        var width=$(window).width()
        var size=width/10
        size = size +"px"
        $("html").css("font-size",size)
    });

js方法:
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 64 * (clientWidth / 640) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);


这里算出来的单位是1rem=75px;

1 0