Para algunos recién llegados, no está muy claro cómo establecer la relación entre rem y px, y cómo se adapta rem, etc. Especioso, digamos familiar o desconocido, digamos desconocido y no desconocido.
Permítanme explicar brevemente la configuración de rem en el archivo js.
Por favor vea el código:
;(function (docm, win) {
let docmEL = docm.documentElement
let resize = 'orientationChange' in window ? 'orientationChange' : 'resize'
docmEL.style.fontSize = (16 * docmEL.clientWidth) / 750 + 'px'
let resizeRem = function () {
docmEL.style.fontSize = (16 * docmEL.clientWidth) / 750 + 'px'
}
win.addEventListener(resize, resizeRem, false)
})(document, window)
Este es el código para la configuración de rem. Hay muchos datos o atributos en él. Mengxin no necesita prestar mucha atención o no es difícil decir que estas cosas no son difíciles. Básicamente, puedes saber lo que significa cada uno de un vistazo .
Actualmente se registran principalmente dos conceptos:
1. El tamaño del borrador del diseño
En otras palabras, ¿cuántos dibujos obtuviste antes del desarrollo? 750px o 640px, etc. Y en este párrafo
(16 * docmEL.clientWidth) / 750
En el código, la palabra 750 se refiere al tamaño del borrador del diseño.
2. Relación de conversión entre rem y px
Significa que cuántos rem deben corresponder a 1px en el desarrollo real en este momento es exacto. Lo mismo en
(16 * docmEL.clientWidth) / 750
Aquí, el 16 en él te dice,16px = 1rem
Otro enfoque remoto
win.addEventListener(resize, resizeRem, false)
})(document, window)
;(function (win, doc) {
function setFontSize() {
var baseFontSize = 100
var baseWidth = 320
var clientWidth = document.documentElement.clientWidth || window.innerWidth
var innerWidth = Math.max(Math.min(clientWidth, 480), 320)
var rem = 100
if (innerWidth > 362 && innerWidth <= 375) {
rem = Math.floor((innerWidth / baseWidth) * baseFontSize * 0.9)
}
if (innerWidth > 375) {
rem = Math.floor((innerWidth / baseWidth) * baseFontSize * 0.84)
}
window.__baseREM = rem
document.querySelector('html').style.fontSize = rem + 'px'
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'
var timer = null
win.addEventListener(
evt,
function () {
clearTimeout(timer)
timer = setTimeout(setFontSize, 10)
},
false
)
win.addEventListener(
'pageshow',
function (e) {
if (e.persisted) {
clearTimeout(timer)
timer = setTimeout(setFontSize, 10)
}
},
false
)
setFontSize()
})(window, document)