Realizar una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.
Realizar una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.
Responsive design es la técnica, de diseño web, que permite crear una estructura en la que cambie su contenido para que siempre sea visible, y cómodo de usar, tanto desde PC y tablets como de smartphones, sin necesidad de hacer giros del dispositivo. adicionalmente esto permite que las páginas sean accesibles a personas con minusvalías visuales para que puedan usar más facilmente la web. Es posible poner en práctica esta forma de adaptar el contenido a todo tipo de resoluciones mediente el uso de hojas de estilo CSS así como JavaScript. En térmios generales existen varios tipos de responsive designs comunes:
De hecho en esta página se hace uso de un fondo de pantalla en forma adaptativa al tilizar
background-image: url("../Figuras/Fondo 2.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Adicionalmente, enseguida se encuentra una galería de imágenes de forma adaptativa.
Este ejemplo reorganiza las imágenes en diferentes tamalos de pantalla: para pantallas mayores a 700px de ancho, mostrará imágenes lado a lado; para pantallas menores a 500px, kas imágenes se mostrarán verticalmente (100%).