Hay muy pocos lugares donde se usaba rem antes, y el principio y el uso específico no están claros, esta vez necesito resumirlo.
Primero
echemos un vistazo a la definición de rem : rem es una unidad relativa (raíz em) recién agregada a CSS3 Esta unidad ha atraído una gran atención. ¿Cuál es la diferencia entre esta unidad y em? La diferencia es que cuando se usa rem para establecer el tamaño de fuente de un elemento, sigue siendo un tamaño relativo, pero el tamaño relativo es solo el elemento raíz HTML. Se puede decir que esta unidad tiene las ventajas de tamaño relativo y tamaño absoluto. A través de ella, todos los tamaños de fuente se pueden ajustar proporcionalmente solo modificando el elemento raíz, y también puede evitar la reacción en cadena del tamaño de fuente capa por capa. Actualmente, todos los navegadores admiten rem excepto IE8 y versiones anteriores. Para los navegadores que no lo soportan, la solución también es muy simple, que consiste en escribir una declaración de unidad absoluta. Estos navegadores ignoran el tamaño de fuente configurado con rem.
por ejemplo:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>rem_CSS参考手册_web前端开发参考手册系列</title>
<style>
html,h1{
font-size:12px;}
p{
font-size:2rem;}
</style>
</head>
<body>
<h1>下面的文字将是html定义的字体大小的2倍：</h1>
<p>我是html定义的12px的2倍，字体大小为24px</p>
</body>
</html>
La página de efectos se ejecuta de la siguiente manera:
Del ejemplo anterior se puede aprender: el elemento raíz HTML define el tamaño de fuente 12px, luego el correspondiente 1 rem = 12px ; el elemento raíz si el tamaño de fuente es 24px, luego el correspondiente 1 rem = 24px ;
para Con una comprensión preliminar del uso de rem, echemos un vistazo a cómo se usa en el proyecto.
El proyecto anterior utilizado
<script src="/static/js/flexible.js"></script>
justo ahora
<script src="/static/js/zbui.flexible.js"></script>
Es una compresión y racionalización de flexible.js.
Analicemos la implementación específica de zbui.flexible.js.
! function(e) {
var t = e.document,
n = t.documentElement,
i = "orientationchange" in e ? "orientationchange" : "resize",
a = function e() {
var t = n.getBoundingClientRect().width;
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px", e
}();
n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1), /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"), parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")), t.addEventListener && (e.addEventListener(i, a, !1), t.addEventListener("DOMContentLoaded", a, !1))
}(window);
// 默认为320-420范围，改成了320-540，与其他平台保持一致。
(function() {
// 备案链接隐藏按钮
if (/^\/mprod/.test(location.pathname)) {
var style = document.createElement("style");
var textNode = document.createTextNode('body footer button {display: none !important}');
style.appendChild(textNode);
document.head.appendChild(style)
}
})();
Primero analice la implementación específica en zbui.flexible.js:
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px",
Este código sirve para establecer el tamaño de fuente del elemento raíz HTML.
El análisis es el siguiente:
var t = n.getBoundingClientRect().width;
t representa el ancho de la pantalla del teléfono móvil.
750 representa el ancho del diseño de la interfaz de usuario.
Si el ancho de la pantalla es 540px, entonces t / 750 * 20 = 14.4;
si el ancho de la pantalla es 720px, entonces t / 750 * 20 = 20;
Math.min (t / 750 * 20, 14.4) El valor mínimo es 14.4, así que defina El ancho máximo de la pantalla es 540px . Si el ancho de la pantalla es mayor a 540px, el tamaño de fuente del elemento raíz y el ancho de la pantalla son los mismos.
Si el valor de Math.min (t / 750 * 20, 14.4) es menor que 8, .55, entonces el valor de Math.max (Math.min (t / 750 * 20, 14.4), 8.55) es 8.55, entonces este Cuando t = 320 , es decir, cuando la pantalla sea menor de 320px, establezca el tamaño del elemento raíz según 320px.
Entonces, se puede concluir de lo anterior: el
rango de ancho de pantalla establecido es: 320px ~ 540px;
si la pantalla es más grande que 540px, será 540px; si el ancho de la pantalla es menor a 320px, entonces será 320px.
Entonces, el rango de tamaño de fuente del elemento raíz es 42.6px ~
72px El tamaño del rango correspondiente de 1rem es: 42.6px ~ 72px
La función del archivo zbui.flexible.js es establecer dinámicamente el tamaño de fuente del elemento raíz de acuerdo con el tamaño de la pantalla, es decir, establecer dinámicamente el tamaño de 1rem.
En este caso, cuando se usa rem en el proyecto, el tamaño del elemento se establece dinámicamente de acuerdo con el tamaño de la pantalla. Realizar la adaptación del terminal móvil.
¡rem es muy poderoso!