Recientemente ordené mis notas de mis estudios front-end anteriores y descubrí que realmente no entiendo el aspecto de adaptación de pantalla (rem) de la web móvil, solo sé cómo usarlo.
A continuación, registre algunos de sus pensamientos sobre la adaptación de la pantalla web móvil (rem).
introducción a remrem representa el tamaño de fuente del elemento raíz (<html>). Es decir, si el tamaño de fuente del elemento raíz es 14px, entonces 1rem = 14px
rem se adapta a la web móvil Efecto de adaptaciónEn pantallas de diferentes tamaños, el tamaño de un mismo elemento no parece ser el mismo, pero la proporción del ancho de pantalla que ocupan es la misma.
código
// En la etiqueta principal del archivo html <script type=text/javascript> (function(){ var html = document.documentElement; // Obtener el ancho de la pantalla (px) var hWidth = html.getBoundingClientRect().width; // Establece el tamaño de fuente de la etiqueta html en hWidth/15 html.style.fontSize = hWidth/15 + 'px'; })()</script> // En menos/* define la variable @r: 750/15 */@r:50rem; div { ancho: 100/@r; alto: 200/@r;} código javascriptPrimero, copiamos 1/15 del tamaño de la pantalla (px) al atributo de tamaño de fuente de la etiqueta html. En este punto, 1/15 px del tamaño de la pantalla (px) equivale al tamaño de 1rem en cualquier tamaño de pantalla. Es decir: en cualquier tamaño de pantalla, siempre que se establezca el mismo valor rem para el elemento, el elemento ocupará la misma proporción del ancho de la pantalla en todos los tamaños de pantalla, y la proporción será la misma y se adaptará a todos los tamaños de pantalla.
menos códigoAhora solo necesita convertir la unidad px del elemento en el borrador del diseño a la unidad rem.
Por lo tanto, en este momento, podemos considerar el borrador del diseño como la pantalla de un teléfono móvil de cierto tamaño.
En mi ejemplo, el ancho del borrador del diseño es 750 px.
Por tanto, 750/15 = 50px, es decir, en la pantalla de un teléfono móvil con el tamaño del borrador del diseño, 1rem = 50px.
Luego, en el código less, definimos una variable @r.
El ancho del div se mide en 100 px, porque en una pantalla con el tamaño del borrador del diseño, 1rem = 50 px, por lo que el valor rem del div es: 100/50 rem, es decir, 100/@r.
La altura del div se mide en 200 px, porque en una pantalla con el tamaño del borrador del diseño, 1rem = 50 px, por lo que el valor rem del div es: 200/50 rem, es decir, 200/@r.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.