移动适配（引入js知识）

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 2rem;height: 2rem;background-color: red;}</style>
</head>
<body><div></div><script src="./js/flexible.js"></script>
</body>
</html>

(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

直接在body最后面引入

<script src="./js/flexible.js"></script>

就可以使用了，不用自己适配一些视口了，爽死，可以直接拿来使用。

移动适配（引入js知识）相关推荐

dva.js 知识导图
dva.js 知识导图 JavaScript 语言变量声明 const 和 let 模板字符串默认参数箭头函数模块的 Import 和 Export ES6 对象和数组析构赋值对象字面量改 ...
【Vue.js 知识量化】ES6 语法积累
ES6 语法 let / var const 的使用 class.extends.super 箭头函数(arrow function) 模版字符串(template string) 结构(destru ...
移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
VScode中html怎么引入js,vscode中如何使用typescript,如何自动编译成js文件
使用vscode创建一个typescript程序 1:介绍 typescript是一个跨平台的编程语言,专门用于前端的语言,是由微软开发,在2013年6月正式发布,它是javascript的超集,扩展 ...
web项目中关于引入JS/css文件, 浏览器console出现 net::ERR_ABORTED错误的解决方法
如图错误: 引入js/css后,控制台出现的错误! 我的错误则是因为在静态文件夹下的原因. 解决:如果要放在webRoot下的静态(static)文件夹下,需要在springMvc的配置文件中添加上注 ...
HTML5中引入JS
在页面中引入JS <script src="jquery-1.10.2.min.js" type="text/javascript"></sc ...
【NLP】NLP任务增强：通过引入外部知识来提供额外信息
作者 | 夜小白整理 | NewBeeNLP 0.前言 NLP任务中,常见的做法是根据「当前输入」进行建模,进而设计出我们的模型,通常用到的信息只有「当前局部的信息」. 这和人类最大的区别就是我们在 ...
静态html引入js添加随机数后缀防止缓存
在web项目开发中,页面引入js被修改时,为避免浏览器缓存引起的问题,在引入js时,给js名后面加上随机数,以保证每次都发送新的请求. 在jsp中,一般通过后台取随机数即可,代码如下: <scr ...
关于引入 js 文件
一.说说 script 标签的几个常用属性 async 表示立即下载该 js 文件,但不妨碍页面中的其他操作(只对外部 js 文件有效) defer 表示该 js 文件可以延迟到整个页面被解析并显示之 ...

移动适配（引入js知识）

移动适配（引入js知识）相关推荐

最新文章

热门文章