Cómo diseñar rem Cómo implementar el diseño rem

Todos pueden estar familiarizados con el diseño de rem y rpx, mientras que Tencent toma muy en serio rpx cuando prueba programas pequeños, en esencia no hay mucha diferencia entre los dos; En la etapa de desarrollo front-end de muchos novatos, no sé por qué algunas interfaces antiguas usan px en lugar de rem o rpx en el proceso de desarrollo de terminales móviles. A continuación, permítanme hablar sobre mis puntos de vista:

En términos generales, el diseño rem/rpx generalmente se usa para el diseño horizontal y px se usa para el diseño vertical.

(Aplicable al diseño de múltiples elementos en el diseño de filas)

1. Tome la imagen de arriba como ejemplo, porque el tamaño horizontal de cada pantalla de teléfono móvil es fijo. Si usa px, la posición de las pantallas pequeñas puede salirse de control, lo que hace que el ajuste del contenido sea confuso. Por lo tanto, utilice el diseño de celda rem/rpx.

2. La altura vertical de los teléfonos móviles se extiende infinitamente, por lo que puede usar px para fijar la cantidad de imágenes para los márgenes y bordes superiores e inferiores. y no tienes que preocuparte de que los elementos no estén disponibles en un caos controlado.

(Aplicable al diseño de un solo elemento en una fila o elementos pequeños en los extremos izquierdo y derecho)

1. Tome la imagen de arriba como ejemplo. Para elementos individuales o elementos pequeños izquierdo y derecho, puede elegir un tamaño fijo de px. La razón es que cuando solo hay un elemento en el diseño horizontal, no hay ningún desorden, porque el ancho de la pantalla es mucho mayor que el ancho de este pequeño elemento. Si está confundido, puede renunciar a la adaptación del teléfono móvil (esta pequeña pantalla debería haberse eliminado hace mucho tiempo).

2. El principio de diseño vertical es el mismo que el anterior.

Este artículo sólo representa un punto de vista de desarrollo personal y analiza la situación real. Si aún no lo entiende, recuerde una frase: si está confundido, debe usar el diseño rem o rpx, esta vista no es incorrecta. Si hay algún error, por favor indíquelo. Esta es también la primera vez que escribo un artículo. Por favor dame tu consejo.

¿Cómo se determina el tamaño del sitio web móvil, como la altura y el ancho? ¿Qué unidades estás utilizando? Por ejemplo, ¿vw?

En primer lugar, necesita saber cuántas unidades hay: vh: porcentaje de altura de la pantalla del teléfono móvil 1vh=1 altura de la pantalla vw: porcentaje de ancho de la pantalla del teléfono móvil 1vw=1 ancho de pantalla rem: fuente -tamaño del elemento raíz html Tamaño de fuente 1 rem = tamaño de fuente Todas estas unidades se adaptan al tamaño de la pantalla del teléfono móvil. Recientemente, hice una versión móvil de la página web. Todas usan cuadros flexibles y diseño rem flexible. , el tamaño de fuente y el ancho y alto del cuadro se pueden diseñar con rem. Sin embargo, si no desea que toda la página tenga barras de desplazamiento, combine el diseño flexible con flex=1 para permitir que un área se rellene automáticamente. el espacio restante y use el atributo de seguimiento excesivo para algunas áreas

¿Cómo maximizar el diseño del paquete del proyecto vue3?

Diseño de cuadrícula, diseño flexible, rem

¿Cómo conectar la página rem y la página px?

Debe configurarlo usted mismo, generalmente 1rem=14px. La unidad y el diseño de px son los mismos, pero las unidades son diferentes, por lo que no tiene que preocuparse por eso.

¿Cuál es la unidad de rem en CSS?

rem es una unidad relativa, relativa al tamaño de fuente del elemento raíz. Solo necesitamos especificar el elemento raíz como valor de referencia y listo. Se utiliza principalmente para el diseño de adaptación de pantalla y se usa ampliamente en terminales móviles. Con este método, el sistema se puede adaptar a diferentes pantallas simplemente configurando diferentes elementos raíz según las diferentes pantallas. Espero que pueda ayudarte

¿El diseño adaptativo rem es adecuado para PC?

Para usar rem en la PC, primero debe usar la función resize() para incluir los remjs de uso común, porque el ancho de la pantalla del teléfono móvil es fijo, mientras que el tamaño de la ventana del navegador se puede cambiar. en el lado de la PC. Además, rem generalmente no se usa en la PC debido principalmente a problemas de compatibilidad con navegadores de versiones inferiores. Por ejemplo, rem solo es compatible con ie9, pero solo parcialmente. Sólo ie11 admite todos. Es parcialmente compatible con ie9 e ie10. Por ejemplo, rem no es compatible cuando se utiliza en pseudoelementos y estilos de abreviaturas