Responsive Web design (RWD) , una estrategia de diseño desarrollada para hacer frente a la asombrosa popularidad de los dispositivos móviles para ver la Web. Las imágenes receptivas son un componente importante del diseño web receptivo (RWD).
El diseño web receptivo es un nuevo enfoque para el diseño de sitios web que garantiza que los usuarios tengan una buena experiencia de visualización sin importar qué tipo de dispositivo estén usando.
Al diseñador web Ethan Marcotte se le atribuye haber acuñado el término «diseño receptivo». En 2010, publicó un artículo en A List Apart en el que analiza el entorno que cambia rápidamente de dispositivos, navegadores, tamaños de pantalla y orientaciones. Construir sitios separados para cada tipo de dispositivo simplemente no sería sostenible. En cambio, propuso un concepto alternativo: el diseño receptivo, que requiere la construcción de diseños flexibles y fluidos que se adapten a casi cualquier pantalla.
Hay varios marcos utilizados por los desarrolladores para hacer que una página web responda.
- Oreja
- Base
- Puro
- Esqueleto
- Symantec
Una imagen de fondo de página completa receptiva se escala de acuerdo con la ventana gráfica del usuario. Hay varios sitios web que usan este efecto, como-
Este efecto de imagen de fondo de página completa se puede agregar fácilmente a una página web usando CSS.
Ejemplo de HTML
de entrada de implementación
HTML
<!DOCTYPE html> <head> <link rel="stylesheet" href="css/main.css"> <title>Responsive Background Example</title> </head> <body> <h1>Hi GFG</h1> </body> </html>
CSS
HTML
body {
/* Image Location */
background-image: url("../img/Fall-Nature-Background-Pictures.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
/* Font Colour */
color:white;
}
EXPLICACIÓN
tamaño de fondo: portada;
Esta propiedad le dice al navegador que escale la imagen de fondo proporcionalmente para que su ancho y alto sean iguales o mayores que el ancho/alto del elemento.
posición de fondo: centro centro;
Lo anterior establece el eje de escala en el centro de la ventana gráfica.
archivo adjunto de fondo: fijo;
El fondo se fija con respecto a la ventana gráfica
SALIDA
La salida muestra la imagen de fondo en diferentes ventanas gráficas.
Publicación traducida automáticamente
Artículo escrito por AyushSaxena y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA