Paga en 4 cuotas sin intereses de $52.25

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

18d

01h

52m

48s

1

Cómo implementar un diseño responsivo en HTML yCSS

Cómo hacer un Diseño Responsivo para HTML y CSS
El diseño responsivo se utiliza para adaptar automáticamente el tamaño de las páginas web a diferentes dispositivos y tamaños de pantalla; para lo cual se debe tener en cuenta varios aspectos importantes en el desarrollo de la programación de la página.

A continuación, se deben tener en cuenta algunos pasos para el diseño responsivo:

  1. Para los estilos se debe utilizar la hoja de CSS.
  1. No se recomienda utilizar tamaños fijos para los elementos como imágenes y contenedores. Se recomienda usar el porcentaje (%) y unidades relativas como el (vw) para el ancho de la ventana.
  1. Para las imágenes se recomienda usar la propiedad: max-width: 100%, que hará que las imágenes se adapten automáticamente al tamaño del contenedor.
  1. Los media Queries@media (max-width: 800px), es propiamente el código que se ejecutara para ajustar el tamaño de la página web en las pantallas de los dispositivos móviles, laptos, tablets y ordenadores. Los media Queries, por lo general son reglas que se cumplen sí el tamaño de la pantalla, tiene un ancho máximo de 800 pixeles o el tamaño que fije el programador, como en el caso del ejemplo que se cita en este numeral.
  2. Para el tamaño de la fuente, se recomienda usar las unidades relativas, como: em y rem, en vez de píxeles fijos, para que el tamaño de los textos se ajusten al tamaño de la pantalla.
  3. Utilizar CSS grid o Flexbox, para crear diseños flexibles que se ajusten al espacio disponible del contenedor.
  4. Como un paso más debemos observar como se aprecia nuestra página web en el navegador y para ello realizamos simulaciones en las herramientas del desarrollador del navegador, probando los distintos tamaños de pantalla.

Ejemplo de Diseño Responsivo:

  • En el editor de texto de tu preferencia, nos vamos al archivo html y generamos el código html básico, colocando. html5
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>```
  • Posteriormente, dentro de la etiqueta body creamos la etiqueta section y dentro de ella la etiqueta div y escribimos el mensaje que queramos.
  • Luego, en la etiqueta style, le damos estilos al selector div, colocándole un background y el color e igualmente le damos estilos a section agregando la propiedad width: 100% para que los demás elementos de imágenes y containers se ajusten proporcionalmente al tamaño de la pantalla. Se le agrega un display: flex y un justify-content: center.
  • Se crea otro div con un class de nombre card y se le agrega una imágen y dos párrafos con mensajes de texto. Asimismo, en style se le dan los estilos a la class cardimg, colocándole un width de 100%, para que la imagen se ajuste automáticamente al tamaño de section.
  • Se estilizan los párrafos con un text-align:center y un color purple.
  • En style se le agrega un media Querie max-width de 800px y se le dan los estilos a la class card con un display: inline-block.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Responsive design</title><style>section {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        div {
            background-color: #DAF7A6;
            color: blue;
        }
        .cardimg{
            width: 100%;
        }
        .cardp {
            text-align: center;
            color: purple;
        }
        .cardp:nth-child(3) {
            color: green;
        }
        @media (max-width: 800px) {
            .card {
                display: inline-block;
            }
        }
    </style></head><body><section><div>Diseño de respuesta de la página web</div><divclass="card"><imgsrc="https://e0.pxfuel.com/wallpapers/680/380/desktop-wallpaper-pin-de-anna-en-fondo-de-pantalla-lobo-dibujos-bonitos-de-animales-dibujos-bonitos-wolf-art-thumbnail.jpg"alt="Imágen Diseño"><p>En imágenes usar la propiedad: max-width: 100%</p><p>Para imágenes y contenedores no usar tamaños fijos</p></div></section></body></html>```

Gracias por leer mi tutorial y con gusto en lo que haya podido contribuir en el aprendizaje del Diseño de respuesta.

Escribe tu comentario
+ 2