¿Aún no conoces estas preguntas de la entrevista?

✨Presenta ¿qué es el diseño responsivo? ¿Cómo implementar un diseño responsivo?

Responsive Design (Responsive Design) es una tecnología de diseño web que puede ajustar automáticamente el diseño y el efecto de visualización de las páginas web de acuerdo con la resolución del dispositivo y el tamaño de la pantalla del usuario para brindar una mejor experiencia de usuario. El diseño responsivo se basa en el código de una página web y utiliza tecnologías como CSS3 Media Query y sistemas de cuadrícula responsivos para lograr un diseño adaptable y efectos cambiantes de las páginas web en diferentes dispositivos.

Al implementar un diseño responsivo, es necesario prestar atención a los siguientes puntos:

1. Diseñar diseños web flexibles

Al diseñar una página web responsiva, se deben tener en cuenta las diferencias en el tamaño de la pantalla y la resolución de los diferentes dispositivos. Al diseñar el diseño de la página web, se debe considerar cómo adaptarse elegantemente a varios dispositivos.

2. Utilice CSS3 Media Query para lograr efectos de cambio

CSS3 Media Query es una nueva característica de CSS3 que puede aplicar estilos CSS específicos a páginas web según diferentes dispositivos, resoluciones y otros atributos para lograr efectos de respuesta.

3. Utilice un diseño fluido y flexible

El diseño fluido es uno de los métodos de diseño de páginas web más comunes en el diseño responsivo. Este método de diseño puede ajustar automáticamente el diseño de la página web a medida que cambia el tamaño de la pantalla para lograr un efecto adaptativo. El diseño elástico también es un método de diseño común en el diseño responsivo. Combina el porcentaje y las propiedades CSS elásticas para permitir que la página web se ajuste y deforme en tiempo real según el tamaño del dispositivo.

El diseño responsivo puede mejorar enormemente la accesibilidad y la experiencia del usuario de las páginas web y se ha convertido en una de las tendencias importantes en el diseño web.

✨ ¿Cómo optimizar la página y analizar cómo mejorar el rendimiento de la página desde la perspectiva del front-end?

Para mejorar el rendimiento de la página desde una perspectiva front-end, puede partir principalmente de los siguientes aspectos:

1. Reducir las solicitudes HTTP

Cada solicitud HTTP en una página web genera una pérdida de ancho de banda y tiempo, por lo que las solicitudes HTTP deben minimizarse tanto como sea posible. Puede reducir las solicitudes HTTP fusionando scripts y hojas de estilo y utilizando sprites para recursos estáticos (como imágenes).

2. Comprimir y optimizar recursos

Comprimir JavaScript, CSS y HTML puede reducir en gran medida el tamaño del archivo y acelerar la carga del sitio web. Al utilizar herramientas como Gzip para comprimir contenido web, el tiempo de transmisión de recursos se puede reducir hasta cierto punto.

3. Usar almacenamiento en caché

El almacenamiento en caché de recursos web puede reducir en gran medida las solicitudes repetidas y acelerar la adquisición de recursos. Puede configurar campos relacionados con el caché, como Expires y Cache-Control, en el encabezado de respuesta HTTP, o usar Service Worker para implementar funciones como el acceso y el almacenamiento en caché sin conexión.

4. Reducir las operaciones DOM

Minimizar la cantidad de operaciones DOM puede reducir la cantidad de redibujos y redibujos de página y aumentar la velocidad de representación de la página. Por ejemplo, puede utilizar documentFragment, requestAnimationFrame y otras tecnologías para reducir la cantidad de operaciones DOM.

5. Usar carga asincrónica

Puede utilizar tecnología de carga asincrónica, como el uso de JavaScript diferido para colocar scripts de JavaScript al final del documento HTML para evitar bloquear el proceso de representación del navegador. Puede utilizar métodos como $.ajax en jQuery para la carga asincrónica de recursos.

6. Carga lenta

Para algunos recursos no esenciales, puede utilizar la carga diferida para cargar la página y cargarla cuando el usuario necesite acceder a ellos para evitar afectar la velocidad de carga de la página.

7. Reducir el tamaño de la imagen

Las imágenes ocupan el mayor espacio en los recursos web y reducir el tamaño de las imágenes puede optimizar en gran medida la velocidad de carga de las páginas web. Puede reducir el tamaño de la imagen utilizando el formato de imagen WebP, comprimiendo la calidad de la imagen, etc.

En resumen, a través de los métodos anteriores, se puede mejorar eficazmente el rendimiento de la página desde una perspectiva frontal, se puede mejorar la experiencia del usuario y se puede aumentar la velocidad de acceso al sitio web.

✨ Cuénteme sobre su comprensión de Ajax y cómo usarlo para manejar solicitudes asincrónicas.

Ajax (JavaScript y XML asincrónicos) se refiere a la obtención de datos del servidor de forma asincrónica a través de JavaScript y XML para lograr una actualización dinámica de la página. Al utilizar la tecnología Ajax, puede actualizar solo las partes que deben cambiarse sin actualizar toda la página, lo que mejora la experiencia del usuario y la interactividad.

El proceso de utilizar Ajax para manejar solicitudes asincrónicas generalmente consta de los siguientes pasos:

1. Crear objeto XMLHttpRequest

En código JavaScript, utilice el objeto XMLHttpRequest para iniciar una solicitud HTTP y obtener los datos de respuesta. Se puede crear de la siguiente manera:

var xhr = new XMLHttpRequest();

2. Establezca el método de solicitud, URL, tipo de contenido, datos, etc.

Antes de iniciar una solicitud Ajax, debe configurar el método de solicitud, la URL, el tipo de contenido, los datos, etc. Por ejemplo, para enviar una solicitud POST al servidor y enviar datos, puede utilizar el siguiente código:

xhr.open('POST', '/url', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(data));

Entre ellos, el primer parámetro es el método de solicitud HTTP y el segundo parámetro es la dirección URL solicitada. El tercer parámetro especifica si se debe procesar de forma asincrónica, cuyo valor predeterminado es verdadero. El método setRequestHeader() establece la información del encabezado de la solicitud. En este ejemplo, el tipo de datos de la solicitud se establece en application/json. Finalmente, envíe la solicitud a través del método send() y convierta los datos al formato de cadena JSON para su entrega.

3. Envía una solicitud y recibe una respuesta

Una vez configurada la solicitud Ajax, se puede llamar al método send() para enviar la solicitud. Después del envío, aún necesita determinar el estado de la respuesta. El siguiente es un ejemplo de código:

xhr.onreadystatechange = function() {
    
    
  if (xhr.readyState == 4 && xhr.status == 200) {
    
    
    // 获取响应数据并进行后续处理
    var data = xhr.responseText;
    // ...
  }
}

Entre ellos, el atributo readyState representa el estado de la solicitud, 0 significa no inicializado, 1 significa que la solicitud se está enviando, 2 significa que la solicitud se ha recibido, 3 significa que la solicitud se está procesando y 4 significa que la solicitud se ha completado. Los códigos de estado de respuesta HTTP generalmente incluyen 200, 401, 404, etc., que representan una solicitud exitosa, no autorizada, archivo no encontrado, etc.

4. Analizar datos de respuesta y procesar resultados

Después de obtener los datos de respuesta, es necesario analizarlos y procesarlos más adelante. Los formatos de datos de respuesta comunes incluyen JSON, XML, HTML, etc., que deben analizarse según circunstancias específicas. Por ejemplo, en el ejemplo anterior, puede utilizar el método JSON.parse() para analizar una cadena JSON en un objeto JavaScript para su procesamiento.

En resumen, al utilizar la tecnología Ajax, puede solicitar y recibir datos del servidor y actualizar la página sin actualizar toda la página. Al mismo tiempo, se debe prestar atención a la mantenibilidad y seguridad del código. Por ejemplo, establecer métodos, parámetros y formatos de solicitud razonables, manejar excepciones de datos de solicitud, etc.

✨ ¿Cómo entiendes el desarrollo modular que utilizas y cuáles son los métodos de implementación de la modularidad?

El desarrollo modular se refiere a un método de desarrollo que divide un proyecto grande en múltiples módulos e interfaces y administración unificadas para mejorar la capacidad de mantenimiento y reutilización del código. El desarrollo modular puede combinar el código de manera más clara, exponer solo las interfaces necesarias, evitar la contaminación global del alcance y reducir la dificultad y el costo del mantenimiento del código.

Varios métodos de implementación modular comunes incluyen:

1. JS común

CommonJS es una especificación modular del lado del servidor que expone los miembros del módulo a través del objeto de exportación e introduce módulos a través del método require(). En la pila de tecnología, Node.js es una plataforma común que implementa esta especificación.

2. AMD

AMD (Definición de módulo asíncrono) es una especificación para el desarrollo modular del lado del navegador JavaScript, que permite la carga asíncrona de módulos. RequireJS es un cargador de módulos JavaScript que sigue la especificación AMD. La característica principal de la especificación AMD es definir el módulo a través de la función define () y luego introducir el módulo a través de la función require ().

3. ES6 modular

Desde ECMAScript 2015 (ES6), JavaScript ha introducido una especificación modular con soporte oficial. La modularidad de ES6 utiliza las palabras clave exportar e importar para exportar e importar módulos, que se pueden usar directamente en el navegador o en el entorno Node.js.

4. UMD

UMD (Definición de módulo universal) es una especificación modular universal que se puede utilizar en múltiples plataformas como AMD y CommonJS. Primero determina si la especificación del módulo NodeJS es compatible. De lo contrario, determina si la especificación AMD es compatible. Finalmente, si ninguna de las dos es compatible, el contenido del módulo se monta en el objeto global.

El desarrollo modular hace que el código sea fácil de mantener y reutilizar y gradualmente se ha convertido en una parte indispensable del desarrollo front-end. Los desarrolladores pueden elegir el método de implementación modular apropiado según la situación real y utilizar herramientas modulares para la gestión y la construcción.

✨ Presente brevemente las operaciones DOM ¿Cómo se presenta la estructura de árbol de DOM?

DOM (Modelo de objetos de documento) se refiere al modelo de objetos de documento, que es una representación de objetos que describe la estructura jerárquica de un documento HTML o XML. Al utilizar operaciones DOM, puede cambiar la estructura, el estilo y el contenido del documento.

La estructura de árbol DOM se refiere a la estructura jerárquica de un documento HTML o XML, que consta de múltiples nodos, incluidos nodos de documento, nodos de elementos, nodos de atributos, nodos de texto, etc. Estos nodos forman una relación jerárquica según su orden en el documento, formando una estructura de árbol, en la que el nodo raíz es el nodo del documento, que representa el documento completo.

Las operaciones DOM incluyen principalmente operaciones de creación, lectura y modificación de nodos. Por ejemplo, puede utilizar la función document.createElement() para crear un nuevo nodo de elemento y la función appendChild() para agregar el nuevo nodo al nodo principal.

Además, puede utilizar funciones como getElementById() y getElementsByClassName() para obtener nodos de elementos en el documento, y funciones como setAttribute() y removeAttribute() para modificar los atributos de los elementos. Utilizando propiedades como InnerText e InnerHTML, el contenido de texto de un elemento se puede leer y modificar. Por ejemplo, el siguiente código muestra cómo modificar el contenido de texto de un nodo de elemento:

var element = document.getElementById('example'); // 获取元素节点
element.innerText = 'New text content'; // 修改元素的文本内容

Cabe señalar que las operaciones DOM implican el reflujo y el repintado de documentos, lo que puede afectar el rendimiento y la experiencia de la página. Por lo tanto, al realizar operaciones DOM, debe prestar atención a su frecuencia y alcance de influencia, y evitar operaciones frecuentes en una gran cantidad de elementos tanto como sea posible.

✨¿Cuáles son las nuevas características de HTML5? ¿Cuáles son las diferencias con las versiones HTML anteriores?

HTML5 es la quinta versión de HTML. Basado en las primeras cuatro versiones, agrega muchas etiquetas semánticas y API nuevas, admite contenido enriquecido como multimedia, gráficos, animaciones, etc., mejora las reglas gramaticales y los efectos de interacción de formularios y proporciona desarrollo web. proporciona una mejor arquitectura, funcionalidad y accesibilidad. Estas son algunas de las características principales de HTML5:

1. Etiquetas semánticas

HTML5 agrega muchas etiquetas semánticas nuevas a los documentos web, como encabezado, navegación, sección, artículo, aparte, pie de página, título de figura, figura, etc., para facilitar a los desarrolladores describir la estructura y el contenido del documento con mayor precisión.

2. Soporte multimedia

HTML5 admite una variedad de contenido multimedia, incluido audio, vídeo, transmisión de medios, etc. Entre ellas, las etiquetas de video y audio se pueden usar para incrustar video y audio y proporcionar funciones como controlar la reproducción, pausa, volumen y pantalla completa. Además, también admite tecnologías de representación de gráficos como el dibujo Canvas y WebGL.

3. Nuevas API y características

HTML5 introduce algunas API y funciones nuevas, como almacenamiento web, trabajadores web, sockets web, geolocalización e historial, etc. Estas API y funciones permiten a los desarrolladores acceder mejor a los datos del cliente e implementar requisitos técnicos como subprocesos múltiples y comunicación en tiempo real.

4. Efectos de interacción de formulario mejorados.

HTML5 proporciona muchos atributos y tipos nuevos para formularios, como correo electrónico, URL, número, rango, fecha, etc. Además, se proporcionan nuevos elementos de formulario, como lista de datos, salida y progreso, así como algunas indicaciones de error y validación de formulario mejoradas.

En comparación con versiones HTML anteriores, las nuevas características de HTML5 se reflejan principalmente en los siguientes aspectos:

• Una mejor estructura semántica hace que los documentos web sean más legibles, mantenibles y accesibles;
• Soporte multimedia más completo, que incluye nuevas funciones técnicas como reproducción de audio, vídeo y gráficos;
• Mejores API y características permiten a los desarrolladores implementar mejor la interacción front-end, el procesamiento de datos y otros requisitos funcionales;
• Mejores efectos de interacción de formulario enriquecen los elementos del formulario y las indicaciones de verificación y error son más amigables.

En general, HTML5 es una tecnología web más moderna, potente y escalable que proporciona a los desarrolladores web mejores capacidades para crear aplicaciones web y una mejor experiencia de usuario.

✨¿Qué es el flujo de eventos en JavaScript? ¿Cuáles son las ventajas de utilizar proxies de eventos en el manejo de eventos?

El flujo de eventos en JavaScript se refiere al orden en que se entregan los eventos dentro de la estructura DOM. En el DOM, cada nodo (incluidos los objetos de documento y ventana) tiene su propio flujo de eventos. Los eventos se activan en cada nodo y se pasan a los nodos principales o secundarios y, finalmente, a los objetos de documento y ventana.

El flujo del evento se divide en tres fases: fase de captura, fase objetivo y fase de burbujeo. Durante la fase de captura, los eventos se transmiten desde el objeto del documento hasta que llegan al nodo del elemento que desencadenó el evento. En la fase de destino, el evento se activa en el nodo del elemento de destino y el evento ya no se transmite hacia abajo ni hacia arriba. En la fase de difusión, el evento surge desde el nodo de destino hasta que llega al objeto del documento.

El uso de proxies de eventos en el procesamiento de eventos es una tecnología común y su principio se basa en la etapa de propagación de eventos. El proxy de eventos vincula el controlador de eventos al elemento principal. Cuando ocurre el evento, el elemento principal lo maneja de manera uniforme, en lugar de vincular un controlador de eventos a cada elemento secundario.

El proxy de eventos tiene las siguientes ventajas:

1. Reducir el número de controladores de eventos.

Cuando hay muchos elementos del mismo tipo en una página que necesitan vincular controladores de eventos, el uso de un proxy de eventos puede reducir la cantidad de controladores de eventos y mejorar el rendimiento.

2. Eventos vinculantes dinámicamente

Si los elementos de la página se generan dinámicamente, el uso de un proxy de eventos le permite vincular controladores de eventos después de crear el elemento.

3. Simplifica el código

El uso de servidores proxy de eventos puede vincular uniformemente los controladores a los elementos principales, lo que hace que el código sea más conciso y más fácil de mantener.

4. guardar memoria

Una vez que se elimina el elemento, el controlador asociado a él también se destruirá al mismo tiempo, sin provocar una pérdida de memoria.

Por ejemplo, el siguiente es un código que utiliza un proxy de eventos en un elemento ul para mostrar el contenido de texto de un elemento secundario li después de hacer clic en él:

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

document.getElementById('list').addEventListener('click', function(event) {
    
    
    if (event.target.tagName === 'LI') {
    
    
        alert(event.target.textContent);
    }
});

En este ejemplo, vinculamos el controlador de eventos de clic al elemento ul y usamos el atributo event.target para obtener el subelemento en el que se hace clic actualmente, logrando así la función de obtener el contenido de texto del subelemento. Aquí, aprovechamos al máximo la función de propagación de eventos y evitamos la molestia de agregar controladores de eventos para cada elemento li.

✨ ¿Qué sabes sobre el diseño Flex y el diseño de cuadrícula?

El diseño flexible y el diseño de cuadrícula son nuevos métodos de diseño introducidos por CSS3, que pueden hacer que el diseño de la página web y el centrado horizontal y vertical sean más convenientes.

Los principios básicos del diseño Flex (diseño flexible) son:

1. Establezca la visualización del elemento contenedor: flex; para convertirlo en un contenedor flexible;
2. Configure el método de diseño de sus subelementos e implemente el diseño dentro del elemento contenedor a través de atributos como justificar contenido, alinear elementos, dirección flexible, crecimiento flexible y reducción flexible.

Las siguientes son algunas características del diseño Flex:

1. Flexible para adaptarse a diferentes dispositivos y tamaños de pantalla;
2. Es fácil configurar la disposición de los subelementos, como configurar los subelementos para que tengan el mismo ancho y alto, cambiar el orden de los subelementos, etc.;
3. Conciso y claro, permitiendo un rápido desarrollo.

El diseño de cuadrícula (diseño de cuadrícula) está diseñado para expresar el estilo de la página web como una cuadrícula bidimensional. Su principio es:

1. Establezca la visualización del elemento contenedor: grid; para convertirlo en un contenedor Grid;
2. Configure el método de diseño de sus elementos secundarios a través de grid-template-columns, grid-template-rows, grid-auto-rows, grid-auto-columns, grid-column-start, grid-column-end, grid-row-start , grid-row-end y otros atributos para implementar el diseño dentro del elemento contenedor.

Las siguientes son algunas características del diseño de cuadrícula:

1. Puede establecer el tamaño y el tamaño del intervalo de cada columna y cada fila. Para el contenido que debe escribirse con regularidad, utilizar el diseño de cuadrícula será muy conveniente;
2. Al igual que el diseño Flex, también es muy flexible y puede manejar fácilmente aplicaciones de varias páginas relativamente complejas;
3. Para algunas soluciones de diseño únicas, el uso del diseño Grid se puede completar con un código de estilo CSS mínimo.

Ambos métodos de diseño tienen sus propias ventajas y pueden seleccionarse y aplicarse según necesidades específicas. En cualquier momento, comprender estos dos métodos de diseño y aprender la sintaxis relevante para operarlos ayudará a realizar un diseño de página web más efectivo y brindarle a la página un mejor efecto de visualización y experiencia de usuario.

✨ Explique qué es el dominio cruzado y cómo resolver problemas de dominio cruzado.

Origen cruzado significa que cuando se realiza una solicitud entre dominios a una página o aplicación, el navegador se negará a realizar la solicitud por razones de seguridad. Los problemas entre dominios generalmente son causados ​​por la política del mismo origen del navegador, es decir, el navegador solo permite solicitudes Ajax a la dirección del mismo origen, y el mismo origen significa que el protocolo, el nombre de dominio y el número de puerto son los mismos. .

Por ejemplo:

• Protocolo: http
• Nombre de dominio: ejemplo.com
• Número de puerto: 80

Si alguna de las otras direcciones es diferente, se considerará una solicitud entre dominios y el navegador rechazará la solicitud.

Hay varias formas de resolver problemas entre dominios:

1. JSONP

JSONP es un método de dominio cruzado ampliamente utilizado. Puede especificar el atributo src en la etiqueta del script y luego agregar un parámetro de nombre de función de devolución de llamada a la solicitud URL correspondiente para permitir que el servidor devuelva datos en formato JSONP y llame a la función de devolución de llamada.

2. CORS

CORS (Cross-Origin Resource Sharing) el intercambio de recursos entre dominios es una solución estándar entre dominios proporcionada por los navegadores modernos. Los encabezados HTTP que permiten solicitudes entre dominios se pueden configurar en el lado del servidor, por ejemplo agregando "Control de acceso" al encabezado de respuesta. -Allow-Origin: *" para permitir solicitudes de origen cruzado desde todos los orígenes.

3. ventana.postMessage

El método window.postMessage() puede comunicarse entre diferentes ventanas y puede usarse para transferir datos entre ventanas entre dominios.

4. proxy inverso

El proxy inverso es un método que envía la solicitud del cliente al servidor y luego el proxy del servidor inicia la solicitud entre dominios. Es decir, bajo la misma política de origen, se accede indirectamente a la interfaz entre dominios a través del servidor proxy inverso.

En resumen, los problemas entre dominios se pueden resolver de las formas anteriores, y cuál elegir depende de la situación y las necesidades específicas. Al mismo tiempo, si tiene que utilizar solicitudes entre dominios, puede configurar Access-Control-Allow-Origin o usar el servidor nginx para implementar un proxy inverso para satisfacer las necesidades de las solicitudes entre dominios.

✨ Describa la difusión y captura de eventos en JavaScript.

El flujo de eventos en JavaScript tiene tres etapas: etapa de captura, etapa de destino y etapa de burbujeo. La difusión y captura de eventos son dos métodos de procesamiento en el proceso de propagación del flujo de eventos.

Captura de eventos: el evento comienza desde el objeto más externo (generalmente el objeto del documento) y verifica paso a paso desde afuera hacia adentro si hay una llamada al controlador de captura de eventos. En otras palabras, durante la fase de captura, los eventos se transmiten desde el objeto de la ventana (la raíz del documento) al elemento más profundo en la jerarquía del elemento que desencadenó el evento. La captura de eventos no es el modo de procesamiento de eventos predeterminado y puede especificar si desea usarlo a través del tercer parámetro de la función addEventListener.

Burbuja de eventos: el evento comienza desde el elemento que lo desencadenó y se propaga hacia arriba en la jerarquía hasta llegar al objeto del documento. En otras palabras, la distribución de eventos es el comportamiento predeterminado del mecanismo de manejo de eventos DOM, que permite que el nodo DOM más profundo reciba eventos primero, seguido de su elemento padre, y la siguiente capa es el elemento padre de su elemento padre. hasta llegar al objeto ventana (objeto ventana). En la mayoría de los casos, la función addEventListener utilizada por los desarrolladores manejará eventos en la etapa de difusión de eventos de forma predeterminada.

La diferencia entre la captura de eventos y la difusión de eventos es el orden en que se propagan los eventos. En la propagación de eventos, el evento se activa primero en el elemento secundario y luego se propaga hacia arriba en el árbol DOM hasta el elemento principal; en la captura de eventos, el evento se activa primero en el elemento principal y luego se propaga hacia abajo en el árbol DOM hasta el elemento secundario. .

En términos generales, para la mayoría de los escenarios de procesamiento de eventos, es más conveniente y común usar la propagación de eventos, sin embargo, en algunos escenarios especiales, como la necesidad de interceptar páginas recargadas, eventos que pueden necesitar ser operados en la etapa raíz del documento, etc. , puede utilizar la captura de eventos para un control más preciso.

✨ Al desarrollar páginas web móviles, ¿cómo adaptarse a los tamaños de pantalla de los diferentes dispositivos?

Al desarrollar páginas web móviles, debe considerar adaptarse a los tamaños de pantalla de diferentes dispositivos. A continuación se muestran algunos métodos comunes:

1. Utilice la ventana gráfica:

Viewport es una forma de configurar el área donde se muestra una página web en un dispositivo móvil. Puede controlar la adaptación del tamaño de la pantalla de los dispositivos móviles configurando los metadatos de la ventana gráfica en la metaetiqueta del encabezado HTML. Por ejemplo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En este código, ancho = ancho del dispositivo significa que el ancho de la pantalla del dispositivo es consistente con el ancho de la ventana gráfica, y escala inicial = 1.0 significa que la relación de escala cuando se inicializa la página web es 1: 1.

2. Utilice el diseño porcentual:

El diseño porcentual es un diseño relativo que se puede adaptar a los tamaños de pantalla de diferentes dispositivos. Por ejemplo, establezca el ancho de un contenedor en 100%:

.container {
    
    
  width: 100%;
}

En este código, el ancho del contenedor se escalará según el tamaño de la ventana del navegador.

3. Utilice consultas de medios:

La consulta de medios es una nueva característica de CSS3 que puede aplicar diferentes estilos según el tamaño de la pantalla del dispositivo, la resolución y otros atributos, logrando así la adaptación a diferentes tamaños de pantalla. Por ejemplo, agregue la siguiente consulta de medios a su hoja de estilos CSS:

@media screen and (max-width: 640px) {
    
    
  /* 小于等于640像素时的样式 */
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
    
    
  /* 大于640像素小于等于1024像素时的样式 */
}

@media screen and (min-width: 1025px) {
    
    
  /* 大于1024像素时的样式 */
}

4. Utilice el diseño rem:

Rem es una unidad relativa al tamaño de fuente del nodo raíz, que se puede usar fácilmente para un diseño receptivo. Por ejemplo, establezca el tamaño de fuente del nodo raíz en 16 píxeles:

html {
    
    
  font-size: 16px;
}

Luego, use unidades rem en los estilos CSS de otros elementos para el diseño:

.container {
    
    
  width: 20rem;
}

En este código, el ancho del elemento .container se escalará en consecuencia según el tamaño de fuente del nodo raíz. Al mismo tiempo, dependiendo del tamaño de la pantalla del dispositivo, el tamaño de fuente del nodo raíz se puede modificar dinámicamente a través de JavaScript para lograr la adaptación.

Los anteriores son algunos métodos de uso común. Según escenarios y necesidades específicos, puede elegir diferentes métodos para adaptarse al tamaño de la pantalla del móvil.

✨ ¿Cómo evitar el problema de la pantalla blanca después de recargar la página?

El problema de la pantalla blanca después de recargar la página generalmente se debe a un error cuando el navegador carga los recursos de la página y se puede evitar mediante los siguientes métodos:

1. Verifique el código: al desarrollar una página web, siempre debe verificar si el código cumple con los estándares y seguir las mejores prácticas para garantizar que el código no tenga errores de sintaxis o errores de lógica del código.

2. Manejo de errores: agregue un mecanismo de manejo de errores al código para manejar errores y excepciones para evitar problemas de pantalla blanca causados ​​por errores en la página.

3. Carga bajo demanda: utilice la tecnología de carga bajo demanda para cargar recursos de la página solo cuando sea necesario, evitando el problema de la pantalla en blanco causado por cargar todos los recursos a la vez.

4. Cargue previamente los recursos de la página: durante la inicialización de la página, cargue previamente los recursos necesarios (como CSS, JS, imágenes, etc.) para reducir el tiempo de carga de la página y evitar problemas de pantalla blanca.

5. Optimice el caché corto: utilice el mecanismo de caché corto del navegador para almacenar en caché los recursos de la página tanto como sea posible para reducir las solicitudes de recursos cuando se recarga la página y evitar problemas de pantalla blanca.

6. Utilice la representación del lado del servidor (SSR): cuando se utiliza SSR, debido a que el contenido HTML de la página se ha generado en el lado del servidor, el problema de la pantalla blanca no ocurrirá al renderizar en el lado del cliente.

En resumen, al verificar el código, el manejo de errores, la carga bajo demanda, la precarga de recursos de la página, la optimización del caché corto y el uso de SSR, puede evitar de manera efectiva el problema de la pantalla blanca después de recargar la página.

✨ ¿Qué es un cierre? ¿Qué hace el cierre en JavaScript?

En JavaScript, un cierre es un objeto especial que consta de una función y variables externas a las que la función puede acceder. Los cierres pueden acceder a variables de funciones externas desde el interior de la función y pueden mantener los valores de estas variables en la memoria una vez finalizada la ejecución de la función, sin verse afectados por el mecanismo de recolección de basura.

Las principales funciones del cierre son las siguientes:

1. Proteger variables: los cierres pueden proteger las variables dentro de una función del acceso externo, desempeñando así una determinada función de seguridad.

2. Implementar propiedades y métodos privatizados: implementar propiedades y métodos privatizados mediante cierres para que el mundo exterior no pueda acceder a ellos ni modificarlos directamente.

3. Compartir funciones y variables: varias funciones secundarias creadas por la misma función principal pueden compartir variables y métodos en la función principal, lo que reduce la cantidad de código duplicado.

4. Programación asincrónica: dado que un cierre puede retener el valor de una variable, puede implementar una programación asincrónica guardando el valor de la variable en la función de devolución de llamada.

En resumen, el cierre es una de las funciones más útiles y poderosas en JavaScript. Puede hacer que el código sea más elegante, conciso y seguro, y puede lograr algunas funciones que son difíciles de lograr de otras maneras. Por lo tanto, en el desarrollo de JavaScript, la importancia de cierre Es muy importante tener una comprensión y dominio profundos.