Explicación detallada del uso de rem + scss para la adaptación en el teléfono móvil

rem (tamaño de fuente del elemento raíz) se refiere a la unidad de tamaño de fuente relativa al elemento raíz (es decir, elemento html).

Suponiendo que el tamaño de fuente del elemento raíz es 10px, el tamaño de 5rem es 5*10=50px, por ejemplo

 html{ tamaño de fuente: 10px;}p{ ancho: 2rem /* 2*10 = 20px;*/ margen: 1rem;}

En el pasado, usábamos a menudo esta página: establecíamos el ancho de la ventana gráfica en el ancho del dispositivo y luego seleccionamos el ancho mínimo del dispositivo con el que necesitamos ser compatibles (generalmente 320 px). Cree páginas basadas en este ancho mínimo. Las unidades utilizan px y porcentaje. En dispositivos con diferentes anchos, el tamaño de fuente y el tamaño del contenido de la página son los mismos. La diferencia es que el espacio entre el contenido en la pantalla grande es mayor que el de la pantalla pequeña. Entonces, la desventaja de esto es que la página no se muestra bien en dispositivos de ciertos tamaños.

Si usamos rem para crear la página, estableceremos diferentes tamaños de fuente en el elemento raíz según los diferentes anchos del dispositivo. Cuanto mayor sea el ancho, mayor será el tamaño de la fuente. Luego use rem para reemplazar el px original. De esta manera, el tamaño de fuente, el tamaño del contenido y el par aumentan a medida que aumenta el ancho de la pantalla.

Primero, js establece el tamaño de fuente predeterminado de html (escrito en el encabezado de html)

 <script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, // Diseño predeterminado ancho y alto del borrador GC = { w: document.documentElement.clientWidth | | ventana.anchointerior || ancho.pantalla, h: documento.documentElement.clientHeight || screen.height }; función setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // El 16 predeterminado se debe a que el tamaño de fuente predeterminado de html es 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Pantalla larga lastHTMLSize = 16; else if(rightSize < currentSize){ // Pantalla ancha lastHTMLSize = (RC.h / GC.h * GC .w) / RC.w * 16 } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

Establecer el archivo scss px en rem

 // El valor predeterminado 16 es el tamaño de fuente predeterminado de HTML // El valor predeterminado 750 es el ancho predeterminado del borrador del diseño // $n es la distancia medida desde el borrador del diseño @charset UTF-8 @function rem($n) { @return $n / (750/16)+rem;}

Edite funciones para realizar llamadas fácilmente:

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@función getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Cambiar posición: absoluta izquierda: 50%; top: rem($top margin: 0 0 0 getLeft($left);}@ mixin centerlt($left, $top) { //Posición central arriba y abajo, izquierda y derecha: absoluta izquierda: 50% arriba: 50%; getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { //Posición central arriba y abajo, izquierda y derecha: absoluta derecha: 50%; arriba: 50%; getTop($top) getRight; ($right) 0 0;}@mixin middlert($right, $top) { //Cambiar posición arriba, abajo, centro, derecha: absoluta; rem($top: 50%; $arriba) 0 0 0;}@mixin centerb($left, $bottom) { //Cambiar posición: absoluta; izquierda: 50%; abajo: rem($bottom margin: 0 0 0 getLeft($left); leftTop($left, $top) { //Cambiar de izquierda a posición superior: absoluta izquierda: rem($top: rem($top);}@mixin rightTop($right, $top) { //Cambiar a la derecha a la posición: absoluta; derecha: rem($right); arriba: rem($top);}@mixin leftBottom($left, $bottom) { //Cambiar a la derecha a la posición: absoluta; izquierda: rem($izquierda); abajo: rem($abajo);}

Llame a la función anterior (la distancia de ancho y alto se puede medir en ps para medir la distancia real. El ancho del borrador del diseño predeterminado es 750):

 .page1-img1{ ancho: rem(473); alto: rem(173); @include centerlt(139, 767);}

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.