¿Qué es el Diseño Responsivo?

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 61 de 76.

En el diseño web, el diseño responsivo es un enfoque que tiene como objetivo crear páginas web que se adapten y proporcionen una experiencia de visualización óptima en una amplia gama de dispositivos, desde monitores de computadoras de escritorio hasta teléfonos móviles. Un sitio web responsivo ajusta automáticamente su diseño, contenido y funcionalidad en función del tamaño de la pantalla, la resolución y la orientación del dispositivo en el que se está visualizando. El objetivo del diseño responsivo es garantizar que los usuarios puedan acceder e interactuar fácilmente con el sitio web, independientemente del dispositivo que estén utilizando.

El diseño responsivo se logra a través de una combinación de técnicas, que incluyen:

Cuadrículas y diseños flexibles: El uso de CSS grid o Flexbox para crear diseños que puedan adaptarse a diferentes tamaños de pantalla.

Imágenes y medios flexibles: Garantizar que las imágenes y otros medios escalen proporcionalmente con el diseño.

Media queries: Aplicar diferentes estilos CSS basados en las características del dispositivo, como el ancho, la altura y la orientación de la pantalla.

A medida que más personas utilizan dispositivos móviles para navegar por la web, el diseño responsivo es esencial para que los sitios web sean fáciles de usar. Garantiza que su sitio se vea bien y funcione correctamente en cualquier dispositivo, brindando a los usuarios una experiencia fluida y consistente.

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y dos imágenes (<img>). Tu tarea es agregar algo de CSS básico para que los elementos sean responsivos y demostrar claramente la diferencia entre la altura fija y la altura automática. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el font-size en 5vw. Esto hará que el tamaño de fuente del encabezado sea responsivo al ancho de la ventana gráfica (viewport).
Escribe una regla CSS que apunte al elemento <p>. Establece el font-size en 3vw. Esto hará que el tamaño de fuente del párrafo sea responsivo al ancho de la ventana gráfica.
Escribe una regla CSS que apunte a la clase .fixed-height. Establece el width en 100% y el height en 150px. Esto creará una imagen distorsionada al forzar una altura fija.
Escribe una regla CSS que apunte a la clase .auto-height. Establece el width en 100% y el height en auto. Esto hará que la imagen se escale proporcionalmente manteniendo su relación de aspecto.
Escribe reglas CSS para los contenedores (.container) para darles un width de 300px, un border de 2px solid #ccc, un margin de 20px y un padding de 10px.

Hoja de referencia

El diseño responsivo crea páginas web que se adaptan a diferentes dispositivos y tamaños de pantalla a través de diseños flexibles, medios escalables y consultas de medios (media queries).

Técnicas clave para el diseño responsivo:

Cuadrículas y diseños flexibles: Uso de CSS Grid o Flexbox
Imágenes y medios flexibles: Escalamiento proporcional con el diseño
Consultas de medios (Media queries): Aplicación de diferentes estilos según las características del dispositivo

Utilice unidades de viewport para una tipografía responsiva:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Haga que las imágenes sean responsivas con un escalado adecuado:

/* Fixed height - causes distortion */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Auto height - maintains aspect ratio */
.auto-height {
  width: 100%;
  height: auto;
}

Pruébalo tú mismo

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>