El papel y la aplicación de rem, por qué los mini programas usan rpx como unidad

Todos los que han desarrollado un mini programa saben que la unidad de un mini programa es rpx. ¿Qué hace? De hecho, se origina en el diseño de rem. Primero comprendamos las ventajas y los principios de funcionamiento de rem.

El diseño rem no se ha utilizado oficialmente en el proyecto. Solo sabemos que cambia según el tamaño de fuente del elemento raíz html

If: html{ font-; size: 20px} ;

Entonces 1rem = 20px;

Entonces, ¿cuál es el efecto? Después de configurar el tamaño de fuente de html, ¿cuál es la diferencia entre usar rem y ¿Usar px para elementos?

De hecho, rem se utiliza principalmente en terminales móviles. Los borradores de diseño del terminal móvil generalmente están diseñados en base a iphone6 ​​y el ancho del borrador de diseño es 750 px; El tamaño físico del teléfono móvil es 375 px; por lo tanto, cuando se usa CSS, el tamaño del diseño debe dividirse por 2.

Para usar rem para completar la adaptación del terminal móvil, el ancho de visualización del navegador debe ser igual. ser arreglado.

En otras palabras, medí el ancho de 367 px en el borrador del diseño, por lo que puedo escribir directamente ancho: 3.67rem en el CSS.

En este momento (tomando como ejemplo un teléfono móvil de 375 px de ancho), el tamaño de fuente HTML establecido por js en el segundo paso es: 375 px dividido por 7,5 para obtener 50 px; 7,5rem multiplicado por 50px 375px es exactamente el ancho total de la pantalla.

En otras palabras, no importa cuán ancha sea la pantalla del teléfono móvil, 7,5rem siempre pueden ocupar todo el ancho de la pantalla. De esta forma, en los teléfonos móviles de pantalla ancha se pueden ampliar elementos en proporciones iguales para lograr la adaptación a varios modelos, y también facilitar la codificación frontal.

Cualquiera que haya creado un miniprograma sabe que, independientemente del modelo, el ancho de pantalla completa del miniprograma es de 750rpx, que en realidad se extiende desde 7,5rem en cuanto a la configuración del tamaño de fuente del directorio raíz. , WeChat Las herramientas de desarrollador ya las han configurado, por lo que puedes usarlas tanto como quieras.

Si te resulta útil, dale me gusta y apóyanos.