Layouts Fluidos

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 63 de 76.

No web design responsivo, um layout fluido se ajusta a diferentes tamanhos de tela usando grades flexíveis e unidades relativas, como porcentagens, em vez de valores de pixel fixos. Isso ajuda o layout a expandir ou encolher para caber em qualquer tela, garantindo uma experiência de usuário suave em todos os dispositivos.

Os princípios fundamentais dos layouts fluidos incluem:

Unidades relativas: Usar porcentagens (%), unidades de viewport (vw, vh) ou ems (em) em vez de pixels fixos (px) para larguras, alturas, margens e preenchimento (padding).

Grids flexíveis: Utilizar CSS Grid ou Flexbox para criar layouts baseados em grid que podem se adaptar a diferentes tamanhos de tela.

Max-width e min-width: Definir larguras máximas e mínimas para elementos para evitar que eles se tornem muito largos ou muito estreitos em tamanhos de tela extremos.

Aqui está um exemplo de um layout fluido básico usando porcentagens:

.container {
    width: 90%; /* O contêiner ocupa 90% da largura da viewport */
    max-width: 1200px; /* O contêiner não excederá 1200px */
}
.sidebar {
    width: 30%; /* A barra lateral ocupa 30% da largura do contêiner */
    float: left;
}
.main-content {
    width: 70%; /* A área de conteúdo principal ocupa 70% da largura do contêiner */
    float: left;
}

Neste exemplo, o elemento .container tem uma largura fluida de 90%, o que significa que ele sempre ocupará 90% da largura da viewport. A propriedade max-width é definida como 1200px para evitar que o contêiner se torne muito largo em telas grandes.

Os elementos .sidebar e .main-content têm larguras fluidas de 30% e 70%, respectivamente, permitindo que eles se adaptem à largura do contêiner.

Desafio

Fácil

Você recebeu um documento HTML com uma divisão pai (<div>) que contém duas divisões filhas (<div>) com as classes sidebar e main. Sua tarefa é criar um layout fluido usando porcentagens. Siga os passos abaixo:

Escreva uma regra CSS que selecione o elemento <div> com a classe container. Defina sua propriedade width para 80% e margin para 0 auto. Adicione uma border de 1px solid black para visualização.
Escreva uma regra CSS que selecione o elemento <div> com a classe sidebar. Defina sua propriedade width para 25% e faça-o flutuar para a esquerda.
Escreva uma regra CSS que selecione o elemento <div> com a classe main. Defina sua propriedade width para 75% e faça-o flutuar para a direita.

Folha de consulta

Um layout fluido se ajusta a diferentes tamanhos de tela usando grades flexíveis e unidades relativas, como porcentagens, em vez de valores fixos em pixels.

Principais princípios de layouts fluidos:

Unidades relativas: Use porcentagens (%), unidades de viewport (vw, vh) ou ems (em) em vez de pixels fixos
Grades flexíveis: Use CSS Grid ou Flexbox para layouts adaptáveis
Max-width e min-width: Defina limites para evitar que os elementos fiquem muito largos ou estreitos

Exemplo básico de layout fluido:

.container {
    width: 90%; /* Ocupa 90% da largura da viewport */
    max-width: 1200px; /* Não excederá 1200px */
}
.sidebar {
    width: 30%; /* 30% da largura do contêiner */
    float: left;
}
.main-content {
    width: 70%; /* 70% da largura do contêiner */
    float: left;
}

Experimente você mesmo

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>