¿Cómo realizar la adaptación del terminal móvil?

Referencia: plan de adaptación del front-end móvil (resumen): enfoque de la entrevista

Generalizar

• Mediante consultas de medios CSS3, es decir, consultas de medios
• diseño flexible
• zoom remoto + viewport
• forma remota

1 、 consultas de medios

Ejecuta diferentes códigos css consultando el ancho del dispositivo, y finalmente logra la configuración de la interfaz.

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

2. Diseño flexible flexible

Referencia: meta name = "viewport" content = "width = device-width, initial-scale = 1.0" ¿Qué significa?

• La ventana gráfica está fija:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
• escala inicial: el nivel de zoom del área visible cuando la página se muestra por primera vez. Un valor de 1.0 significa que la página se muestra en su tamaño real sin ningún zoom; los usuarios de escala máxima pueden acercar la página, y 1.0 prohibirá a los usuarios acercarse al tamaño real. Arriba; escalable por el usuario: si se puede hacer zoom en la página, no se prohíbe el zoom
• La altura es fija, el ancho es adaptable y el elemento usa px como unidad
• A medida que cambia el ancho de la pantalla, la página también cambiará

3. Zoom remoto + ventana gráfica

Establezca el valor rem de acuerdo con el ancho de la pantalla. Los elementos que necesitan ser adaptados usan rem como la unidad, y los elementos que no necesitan ser adaptados todavía usan px como la unidad.
Comprenda a fondo la diferencia entre
la unidad px, em y rem en css. El principio de implementación es: agrandar la página en dpr veces según rem, y luego establecer la ventana gráfica en 1 / dpr.
Definición de dpr : relación de píxeles del dispositivo (dpr) = píxel del dispositivo (resolución) / Píxeles independientes del dispositivo (tamaño de pantalla)
Por ejemplo, si el dpr es 3, toda la página se ampliará 3 veces, 1px (unidad css) es 3px (píxeles físicos) de forma predeterminada, y luego la ventana gráfica se establece en 1/3, de modo que toda la página se retrae a su tamaño original. Realice HD

4. Implementación Rem

• La ventana gráfica está fija:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
• El remvalor de referencia está controlado por código (el tamaño real del diseño es de 720px de ancho), que en realidad es rem + dpr

!function (d) {
    var c = d.document;
    var a = c.documentElement;
    var b = d.devicePixelRatio;
    var f;

    function e() {
      var h = a.getBoundingClientRect().width, g;
      if (b === 1) {
        h = 720
      }
      if(h>720) h = 720;//设置基准值的极限值
      g = h / 7.2;
      a.style.fontSize = g + "px"
    }

    if (b > 2) {
      b = 3
    } else {
      if (b > 1) {
        b = 2
      } else {
        b = 1
      }
    }
    a.setAttribute("data-dpr", b);
    d.addEventListener("resize", function () {
      clearTimeout(f);
      f = setTimeout(e, 200)
    }, false);
    e()
  }(window);