Curso de CSS / Media queries e pontos de quebra baseados no conteúdo

Consultas de mídia aplicam CSS quando condições específicas do ambiente são satisfeitas, como um limite de largura da viewport. Escolha um breakpoint onde o conteúdo real precise de um layout diferente e considere tanto a largura do componente quanto o espaçamento ao redor.

Combine estilos base e condicionais

Regras fora de consultas de mídia fornecem a linha de base. Quando uma condição corresponde, suas declarações se juntam à cascata; elas não eliminam declarações de linha de base não relacionadas. Antes de adicionar um ponto de quebra, verifique se o dimensionamento fluido pode acomodar o conteúdo naturalmente. Veja Layout fluido com min() e clamp().

.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Aqui, usamos o mesmo seletor e escrevemos primeiro o layout de uma coluna, então a declaração condicional subsequente substitui essa propriedade. Você não deve generalizar que “o código abaixo sempre vencerá” em todos os casos. Compare a ordem das declarações quando a importância, prioridade da camada da cascata e seletor etc. são as mesmas. Se as condições forem verdadeiras, mas não houver mudança, verifique se um riscado aparece em outras regras nas ferramentas de desenvolvedor.

Calcule pontos de quebra a partir dos requisitos do cartão

Primeiro, verifique com que largura um único cartão começa a se tornar difícil de ler. Na prática, a largura mínima alvo, incluindo a borda e o espaçamento interno (padding) do cartão, é definida em 16rem. Este não é um valor padrão que se adequará a todos os sites, mas é um requisito de design para este exemplo. Você deve tentar incluir um título e uma descrição longos e ajustá-los para corresponder à fonte e ao conteúdo real.

A largura de conteúdo necessária para duas colunas é 33rem, que é 16rem×2 mais 1rem de espaçamento entre colunas. Se o padding esquerdo e direito do contêiner de conteúdo for de 1rem cada, a largura da janela de visualização necessária é de 35rem. Portanto, no exemplo completo desta lição, passaremos a duas colunas em 35rem. Três colunas são 16rem×3 + espaçamento 1rem×2 + padding esquerdo e direito 2rem. São necessários 52rem.

A razão pela qual não adicionamos o espaço dentro do cartão de volta no cálculo da tabela é porque já o incluímos em nossa largura mínima alvo de 16rem. Por outro lado, se o conteúdo principal compartilha a largura com uma barra lateral, é difícil garantir o espaço do cartão apenas com a viewport. Nesse caso, considere recalcular as condições do layout externo ou determinar o layout interno da parte usando as Container queries para componentes reutilizáveis.

Entenda rem e limites inclusivos

min-width é válido quando é igual ou maior que a largura especificada, e max-width é válido quando é igual ou menor que a largura especificada. Se o tamanho inicial da fonte for 16px, 35rem é 560px e 52rem é 832px. Nem sempre descrevemos rem como um valor fixo em px, pois o valor convertido pode variar dependendo das configurações iniciais de fonte do usuário ou do navegador.

O comprimento relativo em consultas de mídia usa o valor inicial, não o tamanho da fonte sobrescrito pelo CSS da página. Por exemplo, adicionar html { font-size: 32px; } ao CSS não transforma automaticamente a condição de 35rem em uma condição de 1120px. Deve-se fazer uma distinção entre alterações no tamanho rem do texto e alterações nas condições de mídia. Este princípio é descrito na especificação de Consultas de Mídia CSS baseadas em unidades.

/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }

Como mostrado acima, condições min e max com o mesmo limite se sobrepõem nos pontos correspondentes. Você pode reduzir esse problema adicionando condições de largura padrão e mínima em etapas. As condições de duas e três colunas também são verdadeiras em telas grandes, mas usar o mesmo seletor e as mesmas propriedades do exemplo completo e escrever a regra de três colunas depois produz o passo desejado.

Expanda de uma para duas e três colunas

Salve como um arquivo media-breakpoint.html e abra-o no seu navegador. Nenhum arquivo externo é necessário. O exemplo contém três cartões com títulos, links e um identificador longo para verificar a legibilidade e a quebra de texto.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>

Desativar a largura mínima para minmax(0, 1fr) e os cartões evita que as colunas cresçam fora da tela devido ao conteúdo longo. No entanto, o objetivo deste exemplo é reduzir o número de colunas, em vez de forçar apenas que as letras se ajustem. Na largura máxima do corpo de 70rem, as colunas não continuam a se espalhar infinitamente, mas três cartões dividem o espaço restante.

Teste imediatamente ao redor de cada ponto de quebra

1. Compare 559px, 560px e 561px em um ambiente com tamanho de fonte inicial de 16px. 559px deve ser 1 coluna, 560px deve ser 2 colunas.
2. Compare 831px, 832px e 833px. 831px deve ser 2 colunas, 832px deve ser 3 colunas. Certifique-se de que a largura do cartão seja pelo menos 16rem, mesmo quando atingir a junção exata.
3. Altere apenas o ponto de quebra de duas colunas de 35rem para 30rem. Em 480px, observe se a largura do cartão se torna menor do que o alvo e o número de linhas do título aumenta, então restaure para 35rem.
4. Registre separadamente o teste que muda a fonte padrão do navegador e o teste que altera apenas font-size de html no CSS. Não trate como o mesmo experimento, mas verifique novamente a largura e o posicionamento do cartão em cada condição.

As media queries podem testar a orientação, as capacidades de entrada e a preferência por movimento reduzido, assim como a largura. Uma tela estreita não significa necessariamente um dispositivo de toque, e uma tela larga não garante um mouse. Complete primeiro o layout baseado na largura e, em seguida, adicione outras condições onde o recurso as exigir. O guia MDN para usar media queries explica sua sintaxe e condições de ambiente.