纯html移动端适配引入rem.js

十七阿

于 2022-04-19 16:49:52 发布

阅读量518

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_54107860/article/details/124277687

版权

本文介绍了如何使用rem.js文件来实现网页布局的响应式设计，通过监听窗口大小变化动态调整字体大小，以适应不同设备。关键点在于引入<script>标签引入rem.js，并结合CSS的calc()函数以100vw为基准设置body和html的字体大小。

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

定义rem.js文件

(function(doc, win) {

    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //                        if(clientWidth>=640){
            //                            docEl.style.fontSize = '100px';
            //                        }else{
            //                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            //                        }
            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

html文件引入rem.js

    <script src="./rem.js" type="text/javascript"></script>

并定义

body,
html {
      font-size: calc(100vw / 7.5);
      /*设计稿为720px宽度*/
    }

尺寸用rem即可

纯html移动端适配 引入rem.js

纯html移动端适配引入rem.js