Red de conocimiento informático - Material del sitio web - ¿Cómo utilizar JS para controlar el tamaño de fuente de una página web para que se adapte al tamaño de la pantalla?

¿Cómo utilizar JS para controlar el tamaño de fuente de una página web para que se adapte al tamaño de la pantalla?

1. Primero, agregue una línea de metaetiquetas de ventana gráfica al principio del código de la página web.

La ventana gráfica tiene el ancho y alto predeterminados de la página web. La línea de código anterior significa que el ancho de la página web es igual al ancho de la pantalla de forma predeterminada (ancho = ancho del dispositivo), y la relación de escala original (escala inicial = 1) es 1,0, es decir, el tamaño inicial. de la página web ocupa 100 del área de la pantalla.

Todos los principales navegadores admiten esta configuración, incluido IE9. Para los navegadores antiguos (principalmente IE6, 7 y 8), debe usar css3-mediaqueries.js

2. No use el ancho absoluto porque el diseño de la página web se ajustará de acuerdo con el. ancho de pantalla, y no se puede utilizar el ancho absoluto. El ancho de un diseño o un elemento con un ancho absoluto. Esto es muy importante. Específicamente, el código CSS no puede especificar el ancho del píxel: ancho: XXX px;

Solo puede especificar el porcentaje de ancho: ancho: xx o ancho: automático;

3. Tamaño de fuente

La fuente no puede usar un tamaño absoluto (px), solo un tamaño relativo (em).

Texto {

Fuente: normal 100 Helvetica, Arial, sans serif

}

El código anterior especifica el tamaño de fuente como; 100 del tamaño de página predeterminado, que es de 16 píxeles.

h1 {

Tamaño de fuente: 1,5 em;

}

Entonces, el tamaño de h1 es 1,5 veces el tamaño predeterminado, es decir, 24 píxeles (24/16 = 1,5).

Pequeño{

Tamaño de fuente: 0,875 em

}

El tamaño de los elementos pequeños es 0,875 veces el tamaño predeterminado, que es 14 píxeles (14/16=0,875).