O que é Design Responsivo?

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 61 de 76.

No web design, o design responsivo é uma abordagem que visa criar páginas da web que se adaptam e proporcionam uma experiência de visualização ideal em uma ampla gama de dispositivos, desde monitores de computadores desktop até telefones celulares. Um site responsivo ajusta automaticamente seu layout, conteúdo e funcionalidade com base no tamanho da tela, resolução e orientação do dispositivo em que está sendo visualizado. O objetivo do design responsivo é garantir que os usuários possam acessar e interagir facilmente com o site, independentemente do dispositivo que estejam usando.

O design responsivo é alcançado por meio de uma combinação de técnicas, incluindo:

Grades e layouts flexíveis: Usando CSS grid ou Flexbox para criar layouts que podem se adaptar a diferentes tamanhos de tela.

Imagens e mídias flexíveis: Garantir que imagens e outras mídias sejam redimensionadas proporcionalmente ao layout.

Media queries: Aplicando diferentes estilos CSS com base nas características do dispositivo, como largura, altura e orientação da tela.

À medida que mais pessoas usam dispositivos móveis para navegar na web, o design responsivo é essencial para tornar os sites fáceis de usar. Ele garante que seu site tenha uma boa aparência e funcione bem em qualquer dispositivo, proporcionando aos usuários uma experiência suave e consistente.

Desafio

Fácil

Você recebeu um documento HTML com um cabeçalho (<h1>), um parágrafo (<p>) e duas imagens (<img>). Sua tarefa é adicionar um pouco de CSS básico para tornar os elementos responsivos e demonstrar claramente a diferença entre altura fixa e altura automática. Siga as etapas abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina o font-size como 5vw. Isso fará com que o tamanho da fonte do cabeçalho seja responsivo à largura da janela de visualização.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina o font-size como 3vw. Isso fará com que o tamanho da fonte do parágrafo seja responsivo à largura da janela de visualização.
Escreva uma regra CSS que tenha como alvo a classe .fixed-height. Defina a largura como 100% e a altura como 150px. Isso criará uma imagem distorcida ao forçar uma altura fixa.
Escreva uma regra CSS que tenha como alvo a classe .auto-height. Defina a largura como 100% e a altura como auto. Isso fará com que a imagem seja redimensionada proporcionalmente, mantendo sua proporção.
Escreva regras CSS para os contêineres (.container) para definir largura de 300px, borda de 2px solid #ccc, margem de 20px e preenchimento de 10px.

Experimente você mesmo

<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>