¿Qué es el diseño responsive?

Parte de la sección Estilos con 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 añadir algo de CSS básico para que los elementos sean adaptables y demostrar claramente la diferencia entre una altura fija y una altura automática. Sigue los pasos a continuación:

Escribe una regla CSS que seleccione el elemento <h1>. Establece el tamaño de fuente en 5vw. Esto hará que el tamaño de fuente del encabezado se adapte al ancho de la ventana gráfica.
Escribe una regla CSS que seleccione el elemento <p>. Establece el tamaño de fuente en 3vw. Esto hará que el tamaño de fuente del párrafo se adapte al ancho de la ventana gráfica.
Escribe una regla CSS que seleccione la clase .fixed-height. Establece el ancho en 100% y la altura en 150px. Esto creará una imagen distorsionada al forzar una altura fija.
Escribe una regla CSS que seleccione la clase .auto-height. Establece el ancho en 100% y la altura en auto. Esto hará que la imagen cambie de tamaño proporcionalmente mientras mantiene su relación de aspecto.
Escribe reglas CSS para los contenedores (.container) para darles un ancho de 300px, un borde de 2px solid #ccc, un margen de 20px y un relleno de 10px.

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>