El diseño web receptivo (RWD) es un enfoque de desarrollo web que crea cambios dinámicos en la apariencia de un sitio web, según el tamaño de la pantalla y la orientación del dispositivo que se utiliza para verlo.
RWD se puede obtener usando HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).
Creación de una página web receptiva en HTML:
Podemos hacer que nuestra página web responda agregando » ventana gráfica « . La ventana gráfica no tiene un tamaño fijo. Cambia de acuerdo con las orientaciones y tamaños de la pantalla. HTML proporciona una etiqueta <meta> para configurar la ventana gráfica.
<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′>
Para mostrar imágenes receptivas en la página web, podemos usar el elemento <imagen> de HTML. Hay algunos casos en los que un navegador no admite o puede no admitir todos los tipos de imágenes, en ese momento se puede usar la <imagen> donde el navegador elige el formato que puede reconocer.
Para textos receptivos, usamos el ancho de la ventana gráfica”. vw ” es su unidad. Una ventana gráfica es el tamaño de la ventana de un navegador.
Aunque el uso de estas etiquetas puede hacer que su página responda, siempre es mejor usar el marco CSS y Bootstrap. Estos proporcionan una mejor apariencia y facilitan la codificación.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta name='viewport' content= 'width=device-width, initial-scale=1.0'> </head> <body> <div style="text-align: center; background-color: green;"> <h1 style="color: white;"> Responsive Page Using Only HTML </h1> <h2 style="color: white;"> To make test responsive </h2> <p style="font-size: 5vw;color: white;"> This is for Geeks for Geeks </p> <picture> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png" alt="geeksforgeeks"> </picture> </div> </body> </html>
Salida: el título «Página receptiva usando solo HTML» no cambia su tamaño independientemente del tamaño de la pantalla, pero el texto «Esto es para Geeks para Geeks» cambia según el tamaño de la pantalla. Como hemos configurado «vw», esto hace que el texto responda.
Publicación traducida automáticamente
Artículo escrito por manasakanda08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA