对于移动端页面封装的自适应 rem.js

;(function (doc, win, uiSize, prem) {

// let是声明变量的修饰符,是ES6语法

let html = doc.documentElement

// 获得缩放事件

let resizeEvent = 'orientationchange' in win ? 'orientationchange' : 'resize'

// 重新计算html:font-size值的函数

let recalculate = function () {

// 获得视口宽度

let clientWidth = html.clientWidth

if (!clientWidth) {

return

}

// 计算视口宽度和设计稿的宽度的比例

let rate = clientWidth / uiSize

// 动态设置html的font-size值

html.style.fontSize = rate * prem + 'px'

}

// 窗口监听缩放事件

win.addEventListener(resizeEvent, recalculate, false)

// 文档监听文档内容加载结束(资源不一定加载结束)

doc.addEventListener('DOMContentLoaded', recalculate, false)

})(document, window, 750, 100)

对于移动端页面封装的自适应 rem.js相关推荐

PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
移动端开发自适应rem js文件
(function (win) {var docEl = win.document.documentElementvar timefunction refreshRem () {var width = ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
js移动端rem.js自适应布局代码
rem 是 css 的长度单位,它是相对于元素的 font-size 的相对值.假设 html { font-size: 20px; },那么 1rem 就等于 20px. 新建rem.js文件 ( ...
【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
移动端页面rem+media写法过程
移动端页面rem+media写法过程 1.先看psd是多宽的设计图假设是640的设计图设计图都是设备宽度的2倍 2.在iphone5下进行调试所有的元素的宽高设为量出来的值/2 这个时候还是px ...
移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性继承自直接父类所以说在移动端很少用浏览器默认的字体大小 16px 那么 1em= ...

对于移动端页面封装的自适应 rem.js

对于移动端页面封装的自适应 rem.js相关推荐

最新文章

热门文章

对于移动端页面 封装的自适应 rem.js

对于移动端页面 封装的自适应 rem.js相关推荐

最新文章

热门文章

对于移动端页面封装的自适应 rem.js

对于移动端页面封装的自适应 rem.js相关推荐