如何使用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',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的,视真实情况而定。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效