conceptos básicos

unidad rem

rem (raíz em) es una unidad relativa, similar a em, donde em es el tamaño de fuente del elemento principal.
La diferencia es que el punto de referencia para rem es relativo al tamaño de fuente del elemento html.
Por ejemplo, si el elemento raíz (html) se establece en font-size=12px, el elemento no raíz se establece en ancho: 2rem, si se reemplaza por px, significa 24px.

ventajas reales

La ventaja de rem es que puedes cambiar el tamaño de los elementos de la página modificando el tamaño del texto en html, que se puede controlar como un todo.

consultas de los medios

¿Qué es una consulta de medios?

Las consultas de medios ( Media Query) son una sintaxis nueva en CSS3.

Usando consultas @media, puede definir diferentes estilos para diferentes tipos de medios
@media se puede diseñar de manera diferente para diferentes tamaños de pantalla
Cuando cambie el tamaño del navegador, la página también se volverá a representar de acuerdo con el ancho y la altura del navegador.
En la actualidad, las consultas multimedia están disponibles para muchos teléfonos móviles Apple, teléfonos móviles Android, tabletas y otros dispositivos.

Especificación de gramática

@media mediatype and |not |only (media feature) {
    
    
	css-code;
}

Cuidado con el símbolo @ al comienzo de @media
tipo de medio tipo de medio
palabras clave y no solo
característica de los medios las características de los medios deben estar entre paréntesis

tipo de consulta tipo de medio

Dividir diferentes dispositivos terminales en diferentes tipos, llamados tipos de medios

valor	explique
todos	para todos los dispositivos
imprimir	para impresora y vista previa de impresión
piedra	Para pantallas de ordenador, tabletas, smartphones, etc.

palabras clave

Las palabras clave vinculan tipos de medios o múltiples propiedades de medios como condiciones para consultas de medios.

y: es posible conectar varias funciones de medios, lo que equivale al significado de "y".
not: excluye un determinado tipo de medio, que es equivalente al significado de "not" y se puede omitir.
only : especifica un tipo de medio específico, que se puede omitir.

Funciones multimedia

Cada tipo de medio tiene sus propias características diferentes, y se establecen diferentes estilos de visualización de acuerdo con las características de los diferentes tipos de medios. Entendamos tres por ahora. Tenga en cuenta que deben estar entre paréntesis.

valor	explique
ancho	Define el ancho del área visible de la página en el dispositivo de salida
ancho mínimo	Define el ancho mínimo del área visible de la página en el dispositivo de salida
anchura máxima	Define el ancho máximo del área visible de la página en el dispositivo de salida

Ejemplo

/*小于540px 页面的背景颜色变为蓝色*/
@media screen and (max-width:539px){
    
    
	body{
    
    
		background-color:blue;
	}
}
/*540px~970 页面的背景颜色变为绿色*/
@media screen and (min-width:540px) and (max-width:969px){
    
    
	body{
    
    
		background-color:green;
	}
}

/*540px~970 页面的背景颜色变为绿色*/
/**
可以改造成这种写法，和样式的层叠性有关
@media screen and (min-width:540px){
	body{
		background-color:green;
	}
}
*/


/*大于等于970px 页面的背景颜色变为红色*/
@media screen and (min-width:970px){
    
    
	body{
    
    
		background-color:red;
	}
}

rem + consulta de medios para lograr cambios de tamaño dinámicos

La unidad rem sigue html, y con el elemento de página rem, puede establecer diferentes tamaños
Las consultas de medios pueden modificar estilos de acuerdo con diferentes anchos de dispositivo
Media query + rem puede lograr diferentes anchos de dispositivo y cambiar dinámicamente el tamaño de los elementos de la página

@media screen and (min-width:320px){
    
    
	html{
    
    
		font-size:50px;
	}
}
@media screen and (min-width:640px){
    
    
	html{
    
    
		font-size:100px;
	}
}
.top{
    
    
	height:1rem;
	font-size:.5rem;
	background-color:green;
	color:#fff;
	line-height:1rem;
}

Recursos de importación de consultas de medios

La introducción de recursos es llamar a diferentes archivos css para diferentes tamaños de pantalla

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

solución de adaptación rem

principio

Deje que algunos elementos que no se pueden adaptar proporcionalmente se adapten al dispositivo actual en proporciones iguales cuando cambie el tamaño del dispositivo.
Use la consulta de medios para establecer el tamaño de fuente de html proporcionalmente de acuerdo con diferentes dispositivos, y luego use rem como unidad de tamaño para los elementos de la página. Cuando el tamaño de fuente de html cambia, el tamaño del elemento también cambiará, para lograr proporcional escalada.

Esquema de adaptación al desarrollo real

De acuerdo con la relación entre el borrador del diseño y el ancho del dispositivo, calcule y establezca dinámicamente el tamaño de fuente de la etiqueta raíz html; (consulta de medios)
En CSS, el ancho, la altura, la posición relativa, etc. de los elementos del borrador del diseño se convierten al valor de rem de acuerdo con la misma proporción;

uso de tecnología de solución de adaptación rem (mercado principal)

Solución técnica 1

menos / descaro
consultas de los medios
movimiento rápido del ojo

Solución técnica 2

flexible.js
movimiento rápido del ojo

Resumir

Ambas opciones existen ahora.
La opción 2 es más simple. En esta etapa, no necesita comprender el código js que se encuentra dentro.

Solución de adaptación definitiva rem

solución de adaptación rem 1

rem+consulta de medios+sin tecnología

Borrador de diseño ancho de tamaño común

equipo	ancho común
iphone 4.5	640px
iphone 678	750px
Androide	Común 320 px, 360 px, 375 px, 384 px, 400 px, 414 px, 500 px, 720 px, la mayoría de los dispositivos Android de 4,7 ~ 5 pulgadas son 720 px

En circunstancias normales, usamos uno o dos conjuntos de renderizados para adaptarnos a la mayoría de las pantallas, renunciamos a las pantallas extremas o las degradamos con elegancia y sacrificamos algunos efectos.
现在基本以750为准。

Establecer dinámicamente el tamaño de fuente de las etiquetas html

Supongamos que el borrador del diseño es de 750 px.
Supongamos que dividimos toda la pantalla en 15 partes iguales (diferentes estándares de división pueden ser 20 o 10 partes iguales)
Cada copia se usa como tamaño de fuente html, aquí hay 50px
Luego, en un dispositivo de 320 px, un tamaño de fuente de 320/15 es 21,33 px
Divida el tamaño de los elementos de nuestra página por los diferentes tamaños de fuente html y descubra que todavía tienen la misma proporción
Por ejemplo, usamos 750 como borrador de diseño estándar
Un elemento de página de 100*100 píxeles tiene una pantalla de 750, es decir, 100/50 convertido a rem es 2 rem * 2 rem la relación es 1 a 1
En la pantalla 320, el tamaño de fuente html es 21,33, luego 2rem = 42,66 px. En este momento, el ancho y el alto son 42,66, pero la proporción de ancho y alto sigue siendo 1:1.
Pero ha podido lograr el efecto de escalado proporcional de los cuadros de elementos de página en diferentes pantallas.

Método de valor de tamaño de elemento

La fórmula final: valor rem del elemento de página = valor del elemento de página (px) / (ancho de pantalla│ número de divisiones)
El ancho de la pantalla/número de divisiones es el tamaño del tamaño de fuente html
O: valor rem del elemento de la página = valor del elemento de la página (px) / tamaño de fuente html tamaño de fuente

esquema de adaptación rem 2

Solución de adaptación rem simple y eficiente flexible.js

Biblioteca de adaptación de terminal móvil simple y eficiente desarrollada por el equipo de telefonía móvil Taobao
Ya no necesitamos escribir consultas de medios para diferentes pantallas, porque js hace el procesamiento interno
Su principio es dividir el dispositivo actual en 10 partes iguales, pero bajo diferentes dispositivos, la proporción sigue siendo la misma.
Todo lo que tenemos que hacer es determinar el tamaño del texto html de nuestro dispositivo actual.
Por ejemplo, el borrador de diseño actual es de 750 px, luego solo necesitamos establecer el tamaño del texto html en 75 px (750 px/10)
Dentro del valor rem del elemento de página: el valor px del elemento de página/75
Por lo demás, deja que flexible.js haga los cálculos

dirección de github: complemento flexible
de conversión de vscode px rem cssrem

Esquema de adaptación del tamaño de la pantalla