基于rem去计算适配各种页面

最新推荐文章于 2025-05-26 12:30:00 发布

原创最新推荐文章于 2025-05-26 12:30:00 发布 · 973 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #mobile

webapp 同时被 2 个专栏收录

2 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文介绍了一种使用REM单位实现响应式布局的方法。通过JavaScript动态调整根元素字体大小，配合CSS设置，使得页面能够在不同屏幕尺寸下自适应显示。这种方法简单且易于维护。

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

基于rem去计算适配各种页面

js:

    var handlerOrientationChange = function(){
        var dpr=window.devicePixelRatio;
        var width = (window.innerWidth <= 320) ? 320 : ((window.innerWidth >= 640) ? 640 : window.innerWidth);
        var fontSize = 20 * (width / 320) * dpr;
        document.documentElement.style.fontSize = fontSize + "px";
    };
    window.onresize = handlerOrientationChange;
    setTimeout(function(){
        handlerOrientationChange();
    },0)