移动端适配
发布日期:2022-02-17 09:51:14 浏览次数:5 分类:技术文章

本文共 1838 字,大约阅读时间需要 6 分钟。

1、首先在html页面中引入meta标签

2、然后,在html页面中引入我们的rem.js适配脚本。(将下面的代码全部复制下来,在自己的项目代码里面新建一个rem.js脚本文件,将代码全部粘贴进去。然后在html页面中引入该脚本 )

;(function (designWidth, maxWidth) {    var doc = document,        win = window;    var docEl = doc.documentElement;    var tid;    var rootItem, rootStyle;    function refreshRem() {        var width = docEl.getBoundingClientRect().width;        if (!maxWidth) {            maxWidth = 540;        }        ;        if (width > maxWidth) {            width = maxWidth;        }        var rem = width * 100 / designWidth;        rootStyle = "html{font-size:" + rem + 'px !important}';        rootItem = document.getElementById('rootsize') || document.createElement("style");        if (!document.getElementById('rootsize')) {            document.getElementsByTagName("head")[0].appendChild(rootItem);            rootItem.id = 'rootsize';        }        if (rootItem.styleSheet) {            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)        } else {            try {                rootItem.innerHTML = rootStyle            } catch (f) {                rootItem.innerText = rootStyle            }        }        docEl.style.fontSize = rem + "px";    };    refreshRem();    win.addEventListener("resize", function () {        clearTimeout(tid);         tid = setT imeout(refreshRem, 300);    }, false);    win.addEventListener("pageshow", function (e) {        if (e.persisted) {             clearTimeout(tid);            tid = setTimeout(refreshRem, 300);        }    }, false);    if (doc.readyState === "complete") {        doc.body.style.fontSize = "16px";    } else {        doc.addEventListener("DOMContentLoaded", function (e) {            doc.body.style.fontSize = "16px";        }, false);    }})(375, 750);

其中有两个参数分别是designWidth 和maxWidth,是我们设计稿的宽度和我们设定的最大宽度,可根据使用时进行修改。

原文链接:

转载地址:https://blog.csdn.net/qq_43827328/article/details/87882717 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:练习2-3 输出倒三角图案 (5分)
下一篇:Video标签

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年03月06日 13时10分48秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

collator java_Java Collator getInstance(Locale)用法及代码示例 2019-04-21
dtc mysql_DTCC归来-高可用可扩展数据库架构探讨 2019-04-21
java怎样将日期本土化_Java中的日期操作 2019-04-21
java生产者消费者模型到精通_java生产者消费者模型 2019-04-21
java 执行 awk_3.1 biostar lesson3 linux学习日记;java版本;awk 2019-04-21
java二叉树求权值_百度笔试题目:二叉树路径权值和【转】 2019-04-21
欧亚马 java折叠车_如何选择欧亚马折叠车? 2019-04-21
python函数代码块以什么开头_Python初体验-开篇 代码全析 2019-04-21
java闹钟程序设计_JAVA课程设计_闹钟的设计与实现项目-报告_附源代码.doc 2019-04-21
java中的无效的列类型_java.sql.SQLException: 无效的列类型: 1111 2019-04-21
php rewrite url_PHP_URL Rewrite的设置方法,URL Rewrite需要服务器的支持! - phpStudy 2019-04-21
php读取大文件某行内容,PHP读取和修改大文件的某行内容_PHP教程 2019-04-21
打印php错误日志,php怎样打印错误日志 2019-04-21
Calendar导入java,Java程序使用Calendar.add()方法将分钟添加到当前时间 2019-04-21
mysql中用户线程作用,mysql用户线程的建立与用户线程的状态源码解析 2019-04-21
php页面引用公共文件,WeiPHP插件模板中快速引入公共模板文件 2019-04-21
php tracy,admin.php 2019-04-21
php访问父类的所有属性,php – 在父类中使用$this仅在子类中显示父类属性 2019-04-21
oracle比较强大的函数,SQL和ORACLE函数比较 2019-04-21
oracle12c order by,oracle 数据库中order by 的一些高级用法 2019-04-21