Red de conocimiento informático - Conocimiento del nombre de dominio - Cómo implementar un diseño responsivo para el sitio web, adecuado para diferentes resoluciones

Cómo implementar un diseño responsivo para el sitio web, adecuado para diferentes resoluciones

Por ejemplo, necesitamos ser compatibles con diferentes resoluciones de pantalla, claridad y orientaciones de pantalla (vertical) y horizontal (horizontal). ¿Cómo podemos lograr una solución de diseño que satisfaga todas las situaciones? En este sentido, Ma Haixiang cree que nuestro diseño debe ser un diseño de cuadrícula flexible que pueda adaptarse de manera flexible a diferentes tamaños, como las posiciones de módulos de diferentes tamaños en la siguiente página:

Entonces, ¿qué debería ser? hacemos específicamente?

1. Definición de metaetiqueta

Utilice la metaetiqueta de ventana gráfica para controlar el diseño en los navegadores móviles

Pantalla completa cuando se abre mediante acceso directo

Ocultar barra de estado

iPhone agrega conexiones telefónicas para números que parecen números de teléfono y deben desactivarse

2. Utilice consultas de medios para ajustar los estilos correspondientes

Los siguientes tipos de consultas de medios CSS se utilizan comúnmente en el diseño:

Tipo de dispositivo (tipo de medio).

Todos los dispositivos;

Monitores de pantalla de computadora;

Papel de impresión o vista previa de impresión;

Dispositivos portátiles de mano;

Dispositivo tipo TV TV;

Generador de caja de audio y semántica del habla;

Braille para ciegos;

Braille para ciegos.

Equipo de retroalimentación táctil Braille para ciegos;

Impresora Braille en relieve;

Varios equipos de proyección

Utilizando una cuadrícula de letras de densidad fija; Medios impresos como teletipos y terminales.

Funciones del dispositivo:

ancho ancho del navegador;

alto del navegador;

ancho del dispositivo; valor de ancho de resolución de pantalla;

altura del dispositivo es el valor de altura de la resolución de pantalla del dispositivo;

la orientación es la dirección de la ventana del navegador vertical u horizontal cuando el valor de altura de la ventana es mayor o igual a. el ancho, el El valor del atributo es vertical, de lo contrario es horizontal;

valor de relación de aspecto, la relación de aspecto del navegador;

relación de aspecto del dispositivo valor, la relación de aspecto de la pantalla.

Ejemplo:

/* Para pantallas con un ancho de 240 px*/

@pantalla solo multimedia y (max-device-width:240px){

selector{ ...}

}

/* Adecuado para pantalla de 320 px de ancho*/

pantalla solo @media y ( min -device-width:241px) y (max-device-width:320px){

selector{ ...}

}

/* Aplica a pantalla de 480 px de ancho*/

@pantalla solo de medios (min-device-width:321px) y (max-device-width:480px){

selector{... }

}

Para consultas de medios de diseño, no las presentaremos en detalle en el blog de Ma Haixiang, pero si está interesado, puede obtener más información a través de la documentación oficial.

3. Procesamiento responsivo de tablas

Entonces, ¿cómo se debe llevar a cabo el procesamiento responsivo de tablas? ¿Cómo podemos superar las limitaciones de Table? A continuación, aprendamos sobre el método de procesamiento responsivo para tablas:

(1), ocultando columnas de datos sin importancia

Preprocesamiento:

()

Procesamiento:

Código del método de implementación:

@media pantalla única y (ancho máximo: 800 px) {

tabla td: nth-child(2 ),

tabla th:nth-child(2) {display: none;}

}

pantalla solo @media y ( max-width：640px ) {

tabla td:nth-child(4),

tabla th:nth-child(4),

tabla td: nth-child(7),

tabla th:nth-child(7),

tabla td:nth-child(8),

th: nth-child(8){display: none;}

}

Pensando desde la perspectiva del usuario, la percepción de los datos de cada uno es diferente, tal vez Los datos que ocultas son muy importantes para él. , por lo que Ma Haixiang no recomienda este método.

(2). Cambie la disposición horizontal de varias columnas a la disposición vertical de 2 columnas.

Antes:

Después:

Método de implementación. : El posicionamiento está oculto, se convierte en un elemento de bloque y el nombre de la columna correspondiente está vinculado, y luego el pseudo elemento content.attr(data-th) se usa para implementar: attr(data-th ) implementa >:

(3), corrige la primera columna y desplaza las columnas restantes horizontalmente

Antes del procesamiento:

Después del procesamiento:

Código de principio de implementación:

thead {float: left;}

tbody {display:block; width:auto;overflow-x:auto;}

Dos, contenido responsivo

1. Imágenes responsivas

El ancho de banda es un defecto de los terminales móviles si solo realizamos un procesamiento responsivo en el diseño de la página, cuando accedemos a ella. en un teléfono móvil, las imágenes de solicitud siguen siendo imágenes grandes en la PC, el tamaño del archivo es grande, el tráfico se consume y el retraso en la solicitud es largo, por lo que los problemas causados son inconmensurables; Luego debemos procesar la imagen en una imagen responsiva que se adapte al tamaño y resolución del tipo de terminal para crear gráficos razonables.

Principio de procesamiento: el navegador obtiene imágenes que son adecuadas para el tamaño de la pantalla del terminal del usuario y la resolución del procesamiento lógico. Por ejemplo, si la resolución de la pantalla es 320 * 480, entonces el ancho de la imagen que debemos igualar. ser inferior a 320 px. Si el valor específico de DPI (píxel del dispositivo) de la pantalla del terminal es muy alto, es decir, una pantalla de alta definición, entonces tenemos que generar gráficos con 2 veces la resolución (ancho: 640 px) para garantizar la claridad de los gráficos; una pantalla de alta definición. Para conocer los parámetros de pantalla de varios terminales móviles, visite http://screensiz.es/phone.

Solución: De hecho, el W3C ya tiene un borrador para gráficos responsivos: una nueva definición de la etiqueta . Dado que es sólo un borrador, actualmente no hay ningún navegador compatible. estará disponible para nosotros en un futuro próximo. Aunque todavía no es compatible, aprendamos sobre él y allanemos el camino para trabajos futuros.

es un elemento gráfico cuyo contenido consta de varias imágenes de origen y los gráficos se adaptan razonablemente mediante consultas de medios CSS. La especificación del código es la siguiente:

& lt;p>Texto accesible