Web移动端布局

最新推荐文章于 2025-03-06 19:46:39 发布

weixin_34331102

最新推荐文章于 2025-03-06 19:46:39 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoliwang/p/8354582.html

本文介绍了在移动端使用REM单位解决适配问题的方法。通过JavaScript动态设置HTML根元素的字体大小，使得页面元素能够根据屏幕宽度自动调整，从而实现响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到移动端，不得不提适配问题，因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。

rem是根据HTML根目录font-size的大小为基准

<meta name="viewport" content="width=device-width,Initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

用JS获得当前屏幕的分辨率，然后动态的给HTML

    (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 = 100 * (clientWidth / 750) + 'px';      
        };          
        if (!doc.addEventListener) return;         
        win.addEventListener(resizeEvt, recalc, false);         
        doc.addEventListener('DOMContentLoaded', recalc, false);  
    })(document, window);