移动端适配
发布日期: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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年03月06日 13时10分48秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
dtc mysql_DTCC归来-高可用可扩展数据库架构探讨
2019-04-21
java怎样将日期本土化_Java中的日期操作
2019-04-21
java生产者消费者模型到精通_java生产者消费者模型
2019-04-21
java二叉树求权值_百度笔试题目:二叉树路径权值和【转】
2019-04-21
欧亚马 java折叠车_如何选择欧亚马折叠车?
2019-04-21
python函数代码块以什么开头_Python初体验-开篇 代码全析
2019-04-21
java闹钟程序设计_JAVA课程设计_闹钟的设计与实现项目-报告_附源代码.doc
2019-04-21
php读取大文件某行内容,PHP读取和修改大文件的某行内容_PHP教程
2019-04-21
打印php错误日志,php怎样打印错误日志
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