网页自适应 简单写法

165 阅读1分钟

JQ

fontSize();
$(window).resize(function () {
    fontSize();
});
function fontSize() {
    var size;
    var winW = $(window).width();
    if (winW <= 1500 && winW > 800) {
        size = Math.round(winW / 15);
    } else if (winW <= 800) {
        size = Math.round(winW / 7.5);
        if (size > 65) {
            size = 65;
        }
    } else {
        size = 100;
    }
    $('html').css({
        'font-size': size + 'px'
    })
}

或者

<script>
	!function(n) {
    var e = n.document,
    t = e.documentElement,
    i = 640,
    d = i / 43,
    o = "orientationchange" in n ? "orientationchange": "resize",
    a = function() {
        var n = t.clientWidth || 320;
        n > 640 && (n = 640),
        t.style.fontSize = n / d + "px"
    };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);

	</script>

单位 rem
注意如果 想完整 ,你也可以引入 rem.js 不用上面的 js