Tabla de contenido
Conversión general y algunas dificultades
Comienza a ingresar al tutorial de rem
Por que usar rem
Algunos métodos de adaptación anteriores usaban js para calcular dinámicamente el valor de escala inicial de la ventana gráfica.
Por ejemplo, si la pantalla tiene 320 píxeles y se establece en 1, entonces la pantalla de 375 píxeles es 375/320 = 1,18 y así sucesivamente.
Sin embargo, si fuerza el zoom de la página directamente de esta manera, la imagen y el texto de la página se distorsionarán y desenfocarán.
Px es una unidad relativamente fija, el tamaño de fuente se fija directamente, por lo que los usuarios no pueden hacer zoom según el tamaño de fuente del navegador establecido por ellos mismos. Aunque tanto em como rem son unidades relativas, em es relativo al tamaño de fuente de su elemento principal. Cuanto más profundo es el nivel, más complicada es la conversión de em, y el rem es directamente relativo al elemento raíz, lo que evita muchas relaciones jerárquicas. El nuevo navegador móvil es muy compatible con rem y se puede utilizar con confianza.
Conversión general y algunas dificultades
A veces veremos que algunas páginas que usan rem primero le darán un estilo al elemento raíz de la página:
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
¿Por qué es del 62,5%?
El tamaño de fuente predeterminado de la mayoría de los navegadores es 16px, por lo que 1rem = 16px, que no es conveniente para nosotros convertir entre px y rem. Si 1rem = 10px, entonces 100px = 10rem y 25px = 0.25rem. Esto hace que sea fácil convertir mucho, por lo que hay 10/16 arriba.
Si es un borrador de diseño de 640, debe dividirse por 2 y convertirse a 320, que es el mismo ancho que la pantalla del iPhone5. Entonces, el borrador de diseño unidad px / 2/10 se convierte a rem. Después de eso, la consulta de medios establece el porcentaje de tamaño de fuente de cada tamaño de pantalla, y la página se adaptará de acuerdo con el tamaño de fuente raíz establecido anteriormente.
¿Crees que todo es perfecto cuando lo ves? Sin embargo, hay dos pozos profundos:
1. Leí mucha información sobre rem en Internet, y básicamente dije que el tamaño de fuente predeterminado del navegador es 16px, y luego defino directamente el tamaño de fuente: 62.5%. Sin embargo, rem pertenece a la propiedad de css3. El tamaño de fuente predeterminado de algunas versiones anteriores de los navegadores y algunos navegadores domésticos no es 16px, por lo que la conversión 10/16 anterior no es válida, y definir directamente el tamaño de fuente: 62.5% para html no es válido.
2. Chrome obliga a que el tamaño de fuente mínimo sea de 12px. Si es inferior a 12px, se tratará como 12px. Luego, el 1rem = 10px anterior se convertirá en 1rem = 12px y habrá una desviación (la demostración a continuación).
Solución: cambie 1rem = 10px a 1rem = 100px (u otros valores de escala que sean fáciles de convertir); no use rem en el lado de la PC.
Luego, el estilo del elemento raíz de la página anterior debe cambiarse a:
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
Luego use la conversión de consulta de medios de cada resolución resumida por esta fábrica:
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
html { font-size: 843.75%; }
}
En este punto, el pozo está lleno. El px del borrador del diseño se puede convertir directamente a / 100 para obtener el valor rem.
Comienza a ingresar al tutorial de rem
1. Primero configure la metaetiqueta en el encabezado:
1 <meta name = "viewport" content = "escala-inicial = 1, escala-máxima = 1, escala-mínima = 1">
2. Escriba la etiqueta <script> en el encabezado
1 <script type = "text / javascript"> 2 document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px'; 3 </script>
Pregunta: ¿Por qué necesito establecer el tamaño de fuente de Html?
Respuesta: Aquí es para establecer el tamaño de fuente de la etiqueta html. El texto rojo en la descripción anterior es muy claro. Cuando el elemento de la página usa la unidad rem, se basa en el tamaño de fuente de la etiqueta html.
Pregunta: ¿Por qué clientWidth / 640? ¿Por qué se multiplica por 100?
responder:
1. Debido a que este es un valor básico, piénselo en una dirección diferente. No multiplique por 100 aquí para evitar malentendidos.
Por ejemplo: el ancho del borrador del diseño es 640px, el ancho del borrador del diseño de un elemento es 50px y el ancho físico del dispositivo es 320px, entonces debemos establecer el ancho en la página en width: 50rem, que es equivalente al ancho: 50 * (320/640) = 25px; Aquí se puede calcular correctamente que es exactamente la mitad del dispositivo de 320px. De hecho, se puede imaginar como rem = (320/640).
2. La fuente mínima de un navegador general es 12px. Si html font-size = (320/640) px, que es equivalente a font-size = 0.5px, entonces este valor es menor que 12px, lo que provocará algunos errores de cálculo y algunos Problema extraño. Después de * 100, el tamaño de la fuente es de 50 px, lo que puede resolver el problema de las fuentes de menos de 12 px.
3. Para facilitar el cálculo, multiplicamos la relación por 100, (320/640) * 100, luego el elemento correspondiente debe dividirse por 100 (50/100) al establecer el valor, de modo que se pueda garantizar la salida final. El valor no cambia.
Establezca el tamaño de fuente de html, luego podemos comenzar a escribir un ejemplo basado en el borrador del diseño.
El borrador del diseño es de 640 px, un cuadro rojo tiene 320 px de ancho y alto, y el texto en el interior es de 32 px, luego el código para este ejemplo está abajo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
<span>danny.xie</span>
</div>
</body>
</html>1. En el caso de iphone5, el píxel físico del dispositivo es de 320 px
1. En el caso de iphone6, el píxel físico del dispositivo es 375px
Se puede ver que el tamaño de fuente y el ancho y alto del cuadro rojo son consistentes con las proporciones en el borrador del diseño Este es el uso básico de rem para adaptarse a diferentes dispositivos.