Conversión entre rem, rm, px y vw
1. ¿Qué es vw px rem em?
1. vw/vh: Es el ancho o alto relativo de la ventana gráfica. 100vw es igual al ancho total de la pantalla y 100vh es igual a. toda la altura de la pantalla. 1vw = 1 * ancho de la ventana gráfica. Esto significa que una ventana gráfica tiene 100vw. El largo y el ancho son iguales a 1/100 del largo o ancho de la ventana
Por ejemplo: borrador de diseño de 1920x800
Convierta 1/100 1920=19.2 entonces 1vw=19.2px; es: 1vw/y =100vw/1920px
Conversión 1/100 800=8 entonces 1vh=8px
2.px: px es el punto más pequeño que el dispositivo de pantalla puede físicamente mostrar. es una unidad relativa de longitud. En los navegadores de escritorio, 1 píxel suele ser 1 píxel físico frente a la pantalla de la computadora, pero en el lado móvil, 1 px en CSS no es igual a 1 px en el dispositivo. Por ejemplo, la resolución del iPhone 3 es 320 x 480. El iPhone4 se ha convertido en 640 x 960, pero el tamaño de pantalla real del iPhone4 no ha cambiado. En este momento, un píxel CSS equivale a dos píxeles físicos.
3.rem: la unidad de longitud calculada en relación con el tamaño de fuente (tamaño de fuente) del elemento raíz HTML, que se puede configurar, y el valor predeterminado es 16px
4. em: Todos los navegadores modernos A continuación, el tamaño de fuente predeterminado es 16px. En este momento, 1em = 16px. em heredará el tamaño principal y también es una unidad relativa.
2. Conversión entre vw px rem
1. Suponemos que el borrador del diseño psd se basa en 1920px. Entonces:
100vw = 1920px =gt; 1vw = 19.2px
Supuesto: 1rem = 100px
Entonces:
1920px=19.2 rem = 100vw =gt; 1rem = 100/19.2 =5.208vw
100px = 1rem = 5.208vw
En este momento, solo necesitamos configurar el elemento raíz de html:
tamaño de fuente: 5.208vw es suficiente.
Diseño responsivo:
Uno: usar porcentaje y rem
Ancho, alto, rem, tamaño de fuente, rem Establece el tamaño de fuente del elemento raíz en html
De esta manera, el rem en la página mostrará el tamaño de fuente según el elemento raíz 2rem es 32px
2: Use porcentaje y px