Este artículo ha explicado en detalle el concepto de diseño receptivo, las ventajas y desventajas del diseño receptivo, los conceptos de diseño y el código de implementación específico. Es un artículo raro. Aquí lo recomendamos a Friends 1. ¿Qué es el diseño receptivo?
El diseño receptivo es un concepto propuesto por Ethan Marcotte en mayo de 2010. En resumen, un sitio web puede ser compatible con múltiples terminales, en lugar de hacer una versión específica para cada terminal.
Este concepto nació para resolver la navegación de Internet móvil. El diseño receptivo puede proporcionar a los usuarios de diferentes terminales una interfaz más cómoda y una mejor experiencia de usuario. Además, con la popularización actual de dispositivos móviles de pantalla grande, no es una exageración describirla como una tendencia general.
A medida que más y más diseñadores adoptan esta tecnología, no solo vemos muchas innovaciones, sino también algunos modelos formados.
2. ¿Cuáles son las ventajas y desventajas del diseño receptivo? ventaja:Fuerte flexibilidad frente a los dispositivos de resolución de diferentes
Puede resolver rápidamente problemas de adaptación de visualización de múltiples dispositivos
defecto:Compatible con varios equipos, alta carga de trabajo y baja eficiencia
El código es engorroso, y aparecerán los elementos ocultos e inútiles, lo que aumentará el tiempo de carga.
De hecho, esta es una solución de diseño de compromiso, que no puede lograr los mejores resultados debido a la influencia de múltiples factores.
Hasta cierto punto, se cambiará la estructura de diseño original del sitio web, y se producirá confusión del usuario
3. ¿Cómo diseñar un diseño receptivo?1. ¿Cómo resolver el problema de compatibilidad entre diferentes dispositivos?
La consulta de medios en CSS3 puede resolver este problema.
2. ¿Qué valores puede obtener la consulta de medios?
A-ancho del dispositivo, el heigh del dispositivo muestra la pantalla/dispositivo táctil.
Renderiza el ancho y la altura de la ventana, Hegth muestra la pantalla/dispositivo táctil.
La dirección portátil del dispositivo, orientación horizontal o vertical (retrato | Lanscape) y la impresora, etc.
Relación de pantalla Impresora de matriz de puntos de relación de aspecto, etc.
Relación del dispositivo Dispositivo-Aspect-Ratio-dot Matrix Impresrin, etc.
Color de objeto o color de la lista de color, el índice de color muestra la pantalla.
Resolución del dispositivo
3. Estructura y uso de sintaxis
Sintaxis: @Media Nombre del dispositivo (Seleccione Condición) no (Seleccione Condición) y (Condición de selección del dispositivo), Dispositivo Two {SRules}
uso:
a. Ejemplo 1: use @media en el enlace:
<link rel = stylesheet type = text /css medios = solo pantalla y (width máximo: 480px), solo pantalla y (max-device-width: 480px) href = link.css rel = nofollow externo />>
Solo en el uso anterior se puede omitir y limitarse a un monitor de computadora. La primera condición, el ancho máximo se refiere al ancho máximo de la interfaz de representación, y la segunda condición máxima-desvice-width se refiere al ancho máximo del dispositivo.
b. Incrustar @media en la hoja de estilo:
Copiar el código