/**
|
* 咔哒故事REM布局方案
|
* @version: 1.0.2
|
* @author: diaoling<jinjian@hhdd.com>
|
* @date: 2018/11/07
|
**/
|
var rembox = (function() {
|
'use strict'
|
|
var win = window
|
var doc = document
|
|
var rembox = function rembox() {
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}
|
var normalFontSize = 14
|
var _options$designWidth = options.designWidth,
|
designWidth = _options$designWidth === void 0 ? 750 : _options$designWidth,
|
_options$maxClientWid = options.maxClientWidth,
|
maxClientWidth = _options$maxClientWid === void 0 ? 1024 : _options$maxClientWid,
|
_options$bodyFontSize = options.bodyFontSize,
|
bodyFontSize = _options$bodyFontSize === void 0 ? normalFontSize : _options$bodyFontSize,
|
_options$viewportSett = options.viewportSettings,
|
viewportSettings = _options$viewportSett === void 0 ? 'initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover' : _options$viewportSett
|
var docEl = doc.documentElement
|
var dpr = win.devicePixelRatio || 1
|
var headEl = doc.head
|
var rem = 16
|
|
function detectViewWidth(body) {
|
var bodyEl = body || doc.body
|
var el = document.createElement('div')
|
el.style.position = 'fixed'
|
el.style.left = 0
|
el.style.right = 0
|
bodyEl.appendChild(el) // 获取fixed元素宽度
|
|
var rect = el.getBoundingClientRect()
|
var width = rect.width ? rect.width : 0
|
bodyEl.removeChild(el)
|
var metaEl = doc.querySelector('meta[name="viewport"]')
|
var viewportWidth = width === docEl.clientWidth ? 'device-width' : width
|
var metaContent = ''
|
|
if (!metaEl) {
|
metaEl = doc.createElement('meta')
|
metaEl.setAttribute('name', 'viewport')
|
metaContent = 'width='.concat(viewportWidth, ', ').concat(viewportSettings)
|
headEl.appendChild(metaEl)
|
}
|
|
metaContent = metaEl.getAttribute('content') || ''
|
var metaWidth = /width\s*=\s*([^\s,]*)\s*,/gi
|
|
if (metaWidth.test(metaContent)) {
|
metaContent = metaContent.replace(metaWidth, 'width='.concat(viewportWidth, ','))
|
} else {
|
metaContent = 'width='.concat(viewportWidth, ', ').concat(viewportSettings)
|
}
|
|
metaEl.setAttribute('content', metaContent)
|
setRemUnit()
|
}
|
|
// adjust body font size
|
function setBodyFontSize() {
|
var bodyEl = doc.body // 去除 no-js 样式
|
|
var nojsStyle = headEl.querySelector('style[env=no-js]')
|
|
if (nojsStyle) {
|
nojsStyle.parentElement.removeChild(nojsStyle)
|
}
|
|
var styleEl = headEl.querySelector('style[v-rem=flexible]')
|
var ruleName = '.l-maxwidth'
|
var styleRule = 'max-width: '.concat(maxClientWidth, 'px;')
|
|
if (!styleEl) {
|
styleEl = doc.createElement('style')
|
styleEl.setAttribute('v-rem', 'flexible')
|
headEl.appendChild(styleEl)
|
}
|
|
styleEl.innerHTML = ''.concat(ruleName, ' {').concat(styleRule, '}')
|
|
if (bodyEl) {
|
bodyEl.style.fontSize = ''.concat(bodyFontSize, 'px')
|
}
|
}
|
|
// set 1rem = viewWidth / 10
|
function setRemUnit() {
|
rem = (Math.min(docEl.clientWidth, maxClientWidth) / designWidth) * 100
|
docEl.style.fontSize = ''.concat(rem, 'px')
|
}
|
|
// detect 0.5px supports
|
if (dpr >= 2) {
|
var bodyEl = document.createElement('body')
|
var el = document.createElement('div')
|
el.style.border = '.5px solid transparent'
|
bodyEl.appendChild(el)
|
docEl.appendChild(bodyEl)
|
|
if (el.offsetHeight === 1) {
|
docEl.classList.add('hairlines')
|
}
|
|
detectViewWidth(bodyEl)
|
docEl.removeChild(bodyEl)
|
}
|
|
setRemUnit()
|
|
// reset rem unit on page resize
|
window.addEventListener('resize', setRemUnit)
|
window.addEventListener('pageshow', function(e) {
|
if (e.persisted) setRemUnit()
|
})
|
|
if (doc.body) {
|
setBodyFontSize()
|
} else {
|
doc.addEventListener('DOMContentLoaded', setBodyFontSize)
|
}
|
|
return {
|
rem: rem,
|
dpr: dpr,
|
setRemUnit: setRemUnit,
|
rem2px: function rem2px(d) {
|
var val = parseFloat(d) * rem
|
|
if (/^([0-9.]+)rem$/.test(d)) {
|
return ''.concat(val, 'px')
|
}
|
|
return val
|
},
|
px2rem: function px2rem(d) {
|
var val = parseFloat(d) / rem
|
|
if (/^([0-9]+)px$/.test(d)) {
|
return ''.concat(val, 'rem')
|
}
|
|
return val
|
}
|
}
|
}
|
|
var scripts = doc.scripts
|
var currentScript = scripts[scripts.length - 1]
|
var remboxEnable = currentScript && currentScript.getAttribute('rembox')
|
|
if (remboxEnable !== null || remboxEnable !== undefined) {
|
var dataset = currentScript.dataset || {}
|
rembox(dataset)
|
}
|
|
return rembox
|
})()
|
