如何使用rem写自适应的手机端页面?

主要使用了js控制

/**
 * @description: rem缩放
 */
(function () {
	
	
	
    updateOrientation();
    var supportOrientation = (typeof window.orientation === 'number' &&
        typeof window.onorientationchange === 'object');
    if (supportOrientation) {
        window.addEventListener('orientationchange', updateOrientationDelay, false);
    } else {
        window.addEventListener('resize', updateOrientationDelay, false);
    }

    function updateOrientation() {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    }

    function updateOrientationDelay() {
        setTimeout(function () {
            updateOrientation()
        }, 100);
    }
}());

再搭配一个reset.css

就可以顺利开始了 这里设计稿是750的,视真实情况而定。

posted @ 2019-07-18 10:12  Heson  阅读(359)  评论(0编辑  收藏  举报
Live2D