首页 > 分享 > 移动端动态rem的计算方法 (1rem = 100px)

移动端动态rem的计算方法 (1rem = 100px)

有蝉 已于 2022-03-14 18:44:35 修改

于 2020-01-13 14:50:11 首次发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

一 在main.js中引入 flexible.js

vue项目中 

import './assets/js/flexible' //vue

jquery项目中 

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

二 flexible.js全部代码如下

(function (win, lib) {

var doc = win.document

var docEl = doc.documentElement

var metaEl = doc.querySelector('meta[name="viewport"]')

var flexibleEl = doc.querySelector('meta[name="flexible"]')

var dpr = 0

var scale = 0

var tid

var flexible = lib.flexible || (lib.flexible = {})

if (metaEl) {

console.warn('将根据已有的meta标签来设置缩放比例')

var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/)

if (match) {

scale = parseFloat(match[1])

dpr = parseInt(1 / scale)

}

} else if (flexibleEl) {

var content = flexibleEl.getAttribute('content')

if (content) {

var initialDpr = content.match(/initial-dpr=([d.]+)/)

var maximumDpr = content.match(/maximum-dpr=([d.]+)/)

if (initialDpr) {

dpr = parseFloat(initialDpr[1])

scale = parseFloat((1 / dpr).toFixed(2))

}

if (maximumDpr) {

dpr = parseFloat(maximumDpr[1])

scale = parseFloat((1 / dpr).toFixed(2))

}

}

}

if (!dpr && !scale) {

var isAndroid = win.navigator.appVersion.match(/android/gi)

var isIPhone = win.navigator.appVersion.match(/iphone/gi)

var devicePixelRatio = win.devicePixelRatio

if(isIPhone){

if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {

dpr = 3

} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {

dpr = 2

} else {

dpr = 1

}

} else {

dpr = 1

}

scale = 1 / dpr

}

docEl.setAttribute('data-dpr', dpr)

if (!metaEl) {

metaEl = doc.createElement('meta')

metaEl.setAttribute('name', 'viewport')

metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(metaEl)

} else {

var wrap = doc.createElement('div')

wrap.appendChild(metaEl)

doc.write(wrap.innerHTML)

}

}

function refreshRem () {

var width = docEl.getBoundingClientRect().width

if (width / dpr > 1024) {

width = 1024 * dpr

}

var rem = width / 3.75

docEl.style.fontSize = rem + 'px'

flexible.rem = win.rem = rem

}

win.addEventListener('resize', function () {

clearTimeout(tid)

tid = setTimeout(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 = 12 * dpr + 'px'

} else {

doc.addEventListener('DOMContentLoaded', function (e) {

doc.body.style.fontSize = 12 * dpr + 'px'

}, false)

}

refreshRem()

flexible.dpr = win.dpr = dpr

flexible.refreshRem = refreshRem

flexible.rem2px = function (d) {

var val = parseFloat(d) * this.rem

if (typeof d === 'string' && d.match(/rem$/)) {

val += 'px'

}

return val

}

flexible.px2rem = function (d) {

var val = parseFloat(d) / this.rem

if (typeof d === 'string' && d.match(/px$/)) {

val += 'rem'

}

return val

}

})(window, window['lib'] || (window['lib'] = {}))

相关知识

Html+Css+js实现春节倒计时效果(移动端和PC端)
手机移动端快速开发
【HTML
基于深度卷积神经网络的移动端花卉识别系统
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
基于轻量级CNN的植物病害识别方法及移动端应用
电商平台移动端应用开发及维护服务合同.doc
下列哪项属于移动端交易?
揭秘UI设计:如何用小动态Logo提升品牌视觉冲击力

网址: 移动端动态rem的计算方法 (1rem = 100px) https://m.huajiangbk.com/newsview764147.html

所属分类:花卉
上一篇: onSubmit=“return
下一篇: 我与javaweb的孽缘(一)—