La diferencia entre los sitios web para PC y móviles
Lado de la PC: el tamaño de la pantalla es grande, el contenido de la pantalla es grande, la estructura es complicada, la ventana del navegador se reduce, la estructura del contenido de la página no cambiará y no responde.
Terminal móvil: El tamaño de la pantalla es pequeño, el contenido mostrado es limitado, la estructura es clara y concisa, existen muchos tipos de dispositivos, la ventana del navegador se adapta al tamaño de la pantalla del terminal móvil.
El concepto de rem
rem: el múltiplo del valor calculado del tamaño de fuente relativo al elemento raíz (es decir, elemento html).
-
La esencia del diseño rem es la escala proporcional, que generalmente se basa en el ancho. El ancho del borrador del diseño se usa para obtener dinámicamente el ancho de la pantalla usando js
-
rem es la unidad relativa al tamaño de fuente del elemento raíz, que es el tamaño de fuente de html. El tamaño de fuente predeterminado del navegador es 16px, por lo que el valor predeterminado 1rem = 16px
Podemos establecer dinámicamente el tamaño de fuente del elemento raíz de acuerdo con el ancho del dispositivo, de modo que los elementos en la unidad de rem se presenten con efectos visuales relativamente consistentes en diferentes terminales.
Cómo diseñar la relación rem de acuerdo con el dibujo de diseño
La fórmula central real
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
// document.documentElement.style.fontSize
// html的字体大小
// document.documentElement.clientWidth / 7.5 + 'px'
// 可视窗口的大小 除于 设计图的宽度除于100 +px
El efecto de esta cadena de códigos es
Cambie el tamaño de fuente del elemento raíz según el ancho de la pantalla para adaptarse a diferentes dispositivos
Si el ancho de nuestro borrador de diseño es de 750 px, use rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
//
1rem = 100px;
50px se puede escribir como 0.5rem
10px se puede escribir como 0.1rem,
si necesitamos llenar la pantalla, necesitamos 7.5rem
Por que usar rem
En Chrome, Chrome obliga a que el tamaño de fuente mínimo sea de 12 px. Si es inferior a 12 px, se tratará como de 12 px. No habrá fuentes más pequeñas, pero no existe tal limitación cuando se usa rem. Por lo general, 1rem = 100 px
Adaptación a través del tamaño de fuente raíz dinámico, básicamente sin problemas de compatibilidad, adaptación más precisa, conversión fácil
El código completo de rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);