O que é Design Responsivo?

Parte da seção Styling with 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 título (<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 os passos abaixo:

Escreva uma regra CSS que selecione o elemento <h1>. Defina o font-size como 5vw. Isso tornará o tamanho da fonte do título responsivo à largura da viewport.
Escreva uma regra CSS que selecione o elemento <p>. Defina o font-size como 3vw. Isso tornará o tamanho da fonte do parágrafo responsivo à largura da viewport.
Escreva uma regra CSS que selecione a classe .fixed-height. Defina o width como 100% e o height como 150px. Isso criará uma imagem distorcida ao forçar uma altura fixa.
Escreva uma regra CSS que selecione a classe .auto-height. Defina o width como 100% e o height como auto. Isso fará com que a imagem seja redimensionada proporcionalmente, mantendo sua proporção (aspect ratio).
Escreva regras CSS para os contêineres (.container) para dar a eles um width de 300px, border de 2px solid #ccc, margin de 20px e padding de 10px.

Folha de consulta

O design responsivo cria páginas da web que se adaptam a diferentes dispositivos e tamanhos de tela por meio de layouts flexíveis, mídia escalável e media queries.

Principais técnicas para design responsivo:

Grades e layouts flexíveis: Usando CSS Grid ou Flexbox
Imagens e mídias flexíveis: Dimensionamento proporcional ao layout
Media queries: Aplicando estilos diferentes com base nas características do dispositivo

Use unidades de viewport para tipografia responsiva:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Torne as imagens responsivas com o dimensionamento adequado:

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

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

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>