Versão resumida

A maneira mais popular de exibir uma coleção de dados semelhantes é pelo uso de tabelas, mas a tabela do HTML têm a desvantagem de ser difícil de tornar responsivas.

Neste artigo, eu uso o Grid Layout do CSS e suas propriedades (sem usar o JavaScript) para criar tabelas que encapsulam colunas, dependendo da largura da tela, com ainda mais mudanças para um card baseado em layout para telas pequenas.

Para os impacientes, vejam no Codepen a seguir a implementação de um exemplo.

Uma pequena história sobre as tabelas responsivas do HTML

Tabelas responsivas não são um novo tópico. Muitas soluções já foram propostas. Responsive Data Table Roundup (Resumo sobre tabelas responsivas de dados, em português), publicado pela primeira vez em 2012 por Chris Coyier, faz um bom resumo de modo muito claro (incluindo uma atualização de 2018).

Really Responsive Tables using CSS3 Flexbox (Tabelas realmentes responsivas usando CSS3 Flexbox, em português) por Vasan Subramanian, mostra uma ideia de agrupar colunas, implementada com o Flexbox.

Embora muitas ideias interessantes tenham sido propostas, bibliotecas como  o Bootstrap optam pela rolagem horizontal para telas pequenas.

Como agora temos o CSS Grid, penso que poderíamos ter uma alternativa comum para uma melhor rolagem horizontal.

Tabelas em HTML

Iniciando pelo básico, uma tabela no HTML é um formato de layout para mostrar uma coleção de itens através de uma matriz de linhas e colunas. Os itens são dispostos em linhas, com os mesmos atributos de dados nas mesmas colunas, com as linhas frequentemente ordenadas com um ou mais atributos ordenáveis. O formato oferece uma visão panorâmica para compreender e examinar rapidamente grandes quantidades de dados.

Por exemplo, aqui está uma tabela hipotética de detalhes do pedido de compra, que você pode ver em uma aplicação de compras.

Um item, neste caso, é um detalhe do pedido de compra, que possui atributos como número da peça, descrição da peça etc.

Ao usar tabelas em HTML, o layout dos dados é codificado como linhas e colunas (<tr> e <td>, respectivamente). Isso pode ser suficiente para uso por uma tela que se encaixe em toda a largura da tabela, mas, na realidade, não se aplica aos inúmeros tipos de dispositivos que existem hoje. Em termos de hacks, você pode alterar a propriedade de exibição das tabelas e usar qualquer layout que possa fazer com CSS em geral, mas não parece semanticamente correto.  

Tabelas redefinidas (ou uma coleção de itens)

Vamos iniciar redefinindo como os dados da tabela devem ser expressos em HTML.

Conforme falado anteriormente, como os dados da tabela são essencialmente uma coleção ordenada de itens, parece natural usar listas ordenadas. Além disso, como as tabelas são frequentemente usadas para gerar descrições textuais, parece natural incluir isso uma seção, mas isso pode depender do contexto de como os dados da tabela são usados.

<section>
 <ol>
  <!-- O primeiro item da lista é o cabeçalho da tabela -->
  <li>
   <div>#</div>
   <!-- Envolva atributos semanticamente semelhantes como uma hierarquia de divs -->
   <div>
    <div>Número da peça</div>
    <div>Descrição da peça</div>
   </div>
   ...
  </li>
  <!-- O resto dos itens da lista são os dados de fato -->
  <li>
   <div>1</div>
   <!-- Informações relacionadas ao grupo de peças -->
   <div>
    <div>100-10001</div>
    <div>Descrição das peças</div>
   </div>
  ...
  </li>
 ...
 </ol>
</section>

As <div> "puras" são usadas para expressar atributos de itens, uma vez que o HTML5 não define uma tag apropriada para isso. A chave aqui é expressar semanticamente atributos similares como um hierarquia de <div>. Essa estrutura será usada ao definir como os dados devem ser dispostos. Voltarei nesse ponto na próxima seção de tópicos de estilos.

Quanto aos dados reais dentro do elemento <div>, o primeiro item da lista é o cabeçalho e o restante dos itens são os dados principais.

Agora, é o momento de falar sobre estilizar os itens de estilos com o CSS Grid.

Estilizando coleções de itens

A ideia básica aqui é exibir todos os atributos de itens como uma tabela normal, se a largura de exibição permitir. Esse layout ajuda a poder ver o máximo de itens (linhas) possíveis.

Quando a largura da exibição fica mais estreita, alguns atributos são empilhados verticalmente para economizar espaço horizontal. A escolha dos atributos empilhados deve ser baseada em:

1. Os atributos fazem sentido quando estão empilhados ?
2. Quando empilhados verticalmente, o espaço horizontal é preservado?

Quando a largura diminui ainda mais para o tamanho de um dispositivo móvel, cada item é exibido como um card. Este layout tem redundância, pois os nomes dos atributos são exibidos repetidamente em cada card e tem a menor capacidade de visualização, mas isso não compromete a usabilidade (por exemplo, rolagem horizontal, texto muito pequeno etc).

Agora vamos aos detalhes.

Estilização – passo 1: a tabela inteira

Aqui está um resumo visual de como serão as alterações implementadas com o CSS Grid.

Para fazer com que as colunas sejam agrupadas, vários grid containers são definidos como uma hierarquia. As caixas vermelhas são um tipo de grid container para cada linha e as caixas azuis são para cada grupo de colunas que é agrupado.

Vamos começar ajustando a lista como um grid container, definindo uma classe chamada .item-container e inserindo <li> (caixa vermelha).

.item-container {
    display: grid;
    grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
}

O número de colunas explícitas especificadas com  grid-template-columns é igual a nove, que é o número de <div> de nível superior, diretamente aninhadas em  <li>.

A largura da coluna é definida em comprimento relativo para fazer com que as colunas sejam agrupadas. A fração real deve ser ajustada com base no conteúdo.

As colunas que não foram encapsuladas são definidas em comprimento absoluto para maximizar o uso de largura para as colunas de quebra automática. No exemplo dos detalhes dos pedidos de compras (purchase order details), a segunda coluna é um ID de dois dígitos, então defino a largura para dobrar esse tamanho de 2 em.    

Em seguida, definimos outro grid container chamado .attribute-container e o aplicamos em todas as <div> intermediárias sob a lista (caixas azuis).

.attribute-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

A largura mínima da coluna para todos os itens do grid em .attribute-container é especificada com variável do CSS chamada --column-width-min  (abordaremos isso mais tarde) usando a função minmax, com o máximo definido para ocupar o resto do espaço (exemplo: uma fração). Como grid-template-columns está definido como repeat, o espaço horizontal disponível será dividido ao número máximo de colunas que possa ocupar, pelo menos, --column-width-min. O restante das colunas vai para a próxima linha. A largura da coluna será esticada se houver excesso de espaço horizontal, pois o repeat está definido como auto-fit.

Estilização – passo 2: agrupando a tabela

Em seguida, --column-width-min precisa ser independentemente especificado para cada coluna, a fim de agrupá-las. Só para ficar claro, as variáveis precisam ser especificadas para que a tabela inteira também seja renderizada corretamente. Para fazer isso, a class é definida para cada .attribute-container. Uma --column-width-min diferente é especificada para cada escopo de class.

Vamos dar uma olhada no HTML, onde .part-id é aplicado,

<div class="attribute-container part-id">
    <div>Part Number</div>
    <div>Part Description</div>
</div>

Vejamos também o CSS:

.part-id {
    --column-width-min: 10em;
}

Esse grid container específico terá duas colunas, contanto que a largura disponível seja maior que 10 em para cada item do grid (exemplo: o grid container é mais largo do que 20 em). Uma vez que a largura do grid container se torne mais estreita do que 20 em, o segundo item grid passará para a próxima linha.

Quando combinamos as propriedades do CSS desse modo, precisaremos somente de um grid container .attribute-container, com os detalhes alterados onde a class é aplicada.

Podemos ainda aninhar .attribute-container, para obter múltiplos níveis de agrupamento com diferentes larguras, como no exercício a seguir:

<div class="attribute-container part-information">
    <div class="attribute-container part-id">
        <div class="attribute" data-name="Part Number">Número de peça</div>
        <div class="attribute" data-name="Part Description">Descrição da peça
    </div>
    </div>
    <div class="attribute-container vendor-information">
        <div class="attribute">Número do fornecedor</div>
        <div class="attribute">Nome do fornecedor</div>
    </div>
</div>
.part-information {
    --column-width-min: 10em;
}
.part-id {
    --column-width-min: 10em;
}
.vendor-information {
    --column-width-min: 8em;
}

Todos os itens acima estão incluídos na media query abaixo. O breakpoint deve ser selecionado com base na largura necessária quando sua tabela é agrupada ao extremo.

@media screen and (min-width: 737px) {
...
}

Estilização – passo 3: layout de cards

O layout de cards será semelhante a um formulário típico, com nomes de atributos  na primeira coluna e valores de atributos na segunda coluna.

Para fazer isso, uma class chamada .attribute é definida e aplicada para todas as tags <div> sob as <li>.

.attribute {
    display: grid;
    grid-template-columns: minmax(9em, 30%) 1fr;
}

Os nomes dos atributos são obtidos de um atributo personalizado das div chamadas data-name, por exemplo  <div class="atributo" data-name="Número da pela"> e um pseudoelemento é criado. O pseudoelemento estará sujeito ao layout do grid container.

.atributo::before {
    content: attr(data-name);
}

O primeiro item da lista é o cabeçalho e não precisa ser mostrado.

/* Não exiba o primeiro item, pois ele é usado para exibir o cabeçalho para layouts tabulares */
.collection-container>li:first-child {
    display: none;
}

Finalmente, os cards são expostos em uma coluna em dispositivos móveis, mas em duas para telas com um pouco mais de largura, mas não o bastante para mostrar uma tabela.

/* 2 Colunas para o Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
...
}
/* 1  Coluna para Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

Notas finais

Acessibilidade é uma área que não foi considerada neste artigo e pode haver espaço para melhorias nesse quesito. Obrigado pela leitura.

Com a rápida evolução dos dispositivos conectados, o design responsivo continua a ser fundamental para o desenvolvimento para a web.

Até pouco tempo atrás, a expressão "design responsivo para a web" sequer existia. Porém, hoje, muitos de nós precisaram adotar esse conceito de alguma maneira.

De acordo com o site Statistica (em inglês), em 2019, 61% das pesquisas feitas no Google partiram de um dispositivo móvel. Em setembro de 2020, a Google viria a mudar seu algoritmo de pesquisa (texto em inglês) a fim de dar prioridade a sites que fossem compatíveis com dispositivos móveis.

Neste artigo, serão abordados os seguintes tópicos:

• O que é o design responsivo para a web?
• A tag meta viewport e como ela funciona
• Técnicas eficazes de design responsivo para a web para adaptar seu conteúdo a dispositivos móveis
• Ferramentas para ajudar a simular e monitorar a experiência do usuário em celulares e tablets

O que é o design responsivo para a web?

O design responsivo para a web é uma abordagem que tem como foco o ambiente do usuário do site. O ambiente do usuário dependerá do dispositivo que ele usa para se conectar à internet.

Existem diversos fatores que oferecem oportunidades para uma abordagem focada no usuário. Alguns desses fatores são:

• conexão de rede;
• tamanho de tela;
• tipo de interação (como tela sensível ao toque ou painel tátil);
• resolução gráfica.

Antes da popularização do design responsivo para a web, muitas empresas administravam um site à parte para receber tráfego encaminhado com base no agente do usuário.

Porém, no design responsivo para a web, o servidor sempre envia o mesmo código HTML para todos os dispositivos, enquanto o CSS é usado para alterar a renderização da página em cada dispositivo.

Independentemente dessas duas abordagens, a primeira etapa na criação de um site para celular ou tablet é garantir que o navegador conheça a intenção. É nesse ponto que a tag meta viewport entra em jogo.

Identificando um site da web para dispositivos móveis com a tag meta viewport

A tag meta viewport faz o navegador se ajustar à largura da tela de cada dispositivo.

Sem o elemento meta viewport, os navegadores de dispositivos móveis exibirão páginas da web com configurações padrão para dispositivos desktop. O resultado disso é uma experiência não responsiva e com uma visualização bastante distanciada do conteúdo.

A seguir, temos uma implementação padrão:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Agora que informamos ao navegador o que está acontecendo, que tal utilizarmos técnicas populares para tornar nosso site responsivo?

Media queries do CSS para diferentes tamanhos e orientações de tela

Se você é novo no design responsivo para a web, saiba que as media queries são o primeiro e mais importante recurso a ser aprendido. As media queries nos permitem estilizar os elementos com base na largura da viewport. Uma estratégia popular do CSS é estabelecer estilos com foco nos dispositivos móveis primeiro (técnica que, em inglês, chama-se mobile first) e, a partir deles, desenvolver estilos mais complexos e específicos para o desktop.

As media queries são uma parte importante do design responsivo para a web. Elas são comumente usadas para atributos como grid layout, font-size, margin e padding para que eles possam se comportar de maneira diferente, dependendo da tela do dispositivo.

Aqui, temos um exemplo bastante comum de estilo usando a técnica do mobile first. Nele, vemos que a largura da coluna será de 100% em telas pequenas e de 50% em telas maiores.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

O código acima pode ser simples, mas seu resultado é bem interessante.

1. Considerando o mobile first, O elemento "column" é definido como tendo uma largura de 100%;
2. Usando uma media query com min-width, definimos estilos específicos para viewports que tenham a partir de 600px. Assim, para viewports maiores que 600px, nosso elemento "column" terá uma largura que é de 50% com relação ao seu elemento pai.

Embora as media queries sejam essenciais para o design responsivo para a web, outros diversos recursos do CSS vêm sendo amplamente adotados e aceitos pelos navegadores. O flexbox é um desses novos e importantes recursos para o design responsivo para a web.

O que é o Flexbox?

Você pode estar se perguntando: "o que o Flexbox faz"? A pergunta mais adequada seria: "o que o Flexbox não faz"? Qual é a maneira mais fácil de centralizar um elemento verticalmente com CSS? Flexbox. Como criar um grid layout responsivo? Flexbox. Como conquistar a paz mundial? Flexbox.

O módulo de layout do Flexbox (Flexible Box) oferece um modo mais eficiente de dispor, alinhar e distribuir o espaço entre os itens em um contêiner; mesmo quando o seu tamanho é dinâmico (daí a palavra "flex").

No exemplo a seguir, combinamos as já mencionadas media queries para criar um grid responsivo:

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }

    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

Com esse código, nós:

1. Estabelecemos um layout com Flexbox usando display: flex em nosso contêiner main.
2. Estilizamos seguindo a técnica do mobile first. Definimos o elemento main para flex-wrap: wrap, o que habilitará uma quebra de linha para os elementos filhos — conforme podemos ver na figura 1. Definimos um flex-basis: 100% em nossas divs para garantir que elas ocupem 100% da largura do elemento pai (também na figura 1).
3. Definimos um estilo para dispositivos maiores, como tablets e desktops. Utilizamos uma media query igual à do exemplo da seção anterior para declarar no contêiner main a propriedade flex-wrap: nowrap. Isso impede que os elementos filhos tenham uma quebra de linha, o que os mantêm lado a lado no mesmo eixo. Ao configurar na div um flex-basis: 33% para essa mesma media query, estabelecemos que as colunas tenham 33% da largura do elemento pai.
4. A mágica deste exemplo deve acontecer em dispositivos maiores — com a combinação das nossas regras de media query e o Flexbox. Por termos definido display: flex e por termos mantido essa regra na media query, pudemos criar um layout de Flexbox para celulares, tablets e desktops. A media query que herda o display: flex e define a regra flex-basis: 33% nos apresentará um layout do Flexbox conforme podemos observar na figura 2. Antigamente, para conseguirmos esse layout em colunas, teríamos o trabalho de escrever extensas regras de CSS.

Graças ao Flexbox, porém, conseguimos ter layouts variados e fluídos. Em alguns casos, podemos não ter tanta liberdade no espaço vertical. Talvez seja necessário ajustar um elemento a uma altura fixa. Para isso, temos outra ferramenta à nossa disposição: a rolagem horizontal (do inglês, horizontal scroll).

Rolagem horizontal com overflow scroll

Em algum momento, você talvez se depare com conteúdo saindo da viewport e queira deixá-lo mais, digamos, elegante. Eis que temos overflow scroll para salvar o dia. Essa técnica pode ser aplicada para menus e tabelas com rolagem de conteúdo. Segue abaixo um exemplo de menu com essa característica.

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>Design responsivo para a web</span>
  <span>Responsividade</span>
  <span>Menu responsivo</span>
  <span>Exemplo de overflow scroll</span>
  <span>É muita coisa!</span>
  <span>Sim</span>
  <span>temos</span>
  <span>mais</span>
  <span>um</span>
  <span>item</span>
</menu>

Como fazemos isso? Vamos analisar mais de perto.

• overflow-y: scroll é o ingrediente secreto da nossa receita. Com essa declaração, os elementos filhos terão uma rolagem no eixo horizontal.
• Muita calma nessa hora, no entanto! Você pode pensar que o overflow-y seja suficiente, mas também precisamos dizer ao navegador para não envolver os elementos filhos com white-space: nowrap?

Agora que temos algumas técnicas de layout do design responsivo para a web na manga, vamos dar uma olhada em dois elementos que nos trazem desafios específicos à sua natureza visual: imagens e vídeos.

Imagens responsivas

Usando atributos modernos das tags de imagem, podemos adaptar seu conteúdo a uma variedade de dispositivos e resoluções. Veja este exemplo de imagem responsiva:

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Essa estrutura faz muita coisa acontecer. Vamos por partes:

1. Ao declarar max-width: 100%, a imagem será redimensionada para um tamanho maior ou menor dependendo da largura do contêiner.
2. Combinando as declarações das tags picture, source e img, vamos renderizar e carregar a imagem mais adequada ao dispositivo do usuário.
3. WebP é um formato de imagem moderno, que fornece uma melhor compressão para imagens na web. Com a tag source, podemos referenciar uma imagem WebP para usá-la em navegadores que têm suporte a esse formato. Para os que não tem, usamos outra source que referencia uma imagem PNG.
4. srcset é usado para informar ao navegador qual imagem usar com base na resolução do dispositivo.
5. Estabelecemos o lazy loading nativo ao declararmos loading="lazy".

Vídeos responsivos

A responsividade de vídeos é outro assunto que levou à elaboração de inúmeros artigos e documentações.

Uma coisa fundamental para termos em mente quando o assunto são imagens, vídeos, iframes e outros elementos responsivos é o uso da proporção de tela (em inglês, aspect ratio). A "caixa" de proporção de tela já é uma técnica conhecida e também uma ferramenta bastante útil que o desenvolvedor para a web deve ter no seu arsenal.

Este artigo fornece uma demonstração sólida de como se ter vídeos com largura "fluída" (texto em inglês). Vamos dar uma olhada no código a seguir e analisá-lo:

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

No exemplo, temos a integração de um vídeo do YouTube em uma tag iframe dentro de uma div com a classe videoWrapper. Vamos ver o que esse nosso código faz:

• A declaração position: relative no contêiner faz os elementos filhos terem uma posição absoluta em relação a ele.
• height: 0, junto a padding-bottom: 56.25%, é a chave para estabelecer um comportamento dinâmico; reforçando a proporção de tela 16:9.
• As declarações position: absolute, top: 0 e left: 0 do iframe criam um comportamento no qual o elemento se posiciona de maneira absoluta em relação ao seu elemento pai, fixando-o no canto superior esquerdo.
• Por fim, largura e altura (as propriedades height e width) de 100% fazem com que o iframe tenha 100% da largura e da altura do seu elemento pai, enquanto o .videoWrapper — o elemento pai — assume total controle em estabelecer a proporção de tela.

Eu sei... é muita coisa. Podemos fazer ainda mais para que vídeos e imagens tenham a melhor adaptação possível para celulares e tablets. Inclusive, eu gostaria que você pesquisasse por conta própria por outras ferramentas para utilizar em conjunto com as já mencionadas.

Certo, agora que já dominamos o design responsivo para a web, como podemos testar tudo o que fizemos? Felizmente, temos uma série de ferramentas para simular e monitorar a experiência do usuário em uma variedade de dispositivos.

Ferramentas para simular e monitorar sites da web responsivos

Há uma variedade de ferramentas úteis para nos ajudar a criar sites com o design responsivo para a web. Abaixo estão algumas que considero especialmente úteis.

Emulação de dispositivos móveis nas ferramentas do desenvolvedor do Google Chrome

As ferramentas do desenvolvedor do Google Chrome fornecem emulação de uma variedade de dispositivos móveis, como tablets e celulares. Ele também fornece uma opção "responsive ", que permite definir um tamanho de viewport personalizado.

Monitorando o desempenho de um site da web para dispositivos móveis com o Foo

O Lighthouse é uma ferramenta de código aberto que fornece uma maneira de analisar o desempenho de um site para um dispositivo específico.

O Foo usa o Lighthouse internamente para monitorar o desempenho de um site, fornecendo um feedback para análise. Você pode configurar o monitoramento para dispositivos desktop e móveis para obter feedback contínuo sobre o nível de responsividade de seu site.

Por exemplo, um relatório do Lighthouse indicará se e quais imagens estão sendo carregadas incorretamente em algum dispositivo.

Conclusão

O design responsivo para a web seguirá evoluindo rapidamente, mas — se ficarmos por dentro das tendências atuais — poderemos proporcionar a melhor experiência aos nossos usuários. Espero que as ferramentas e técnicas apresentadas aqui sejam úteis a você! Com elas, podemos agradar aos usuários dos nossos sites e ainda conseguir um melhor posicionamento nos mecanismos de busca.

A maioria dos sites de hoje é responsiva. Se você precisar centralizar e alinhar imagens nesses sites (texto em inglês), precisará aprender a tornar as imagens fluidas ou responsivas com CSS.

Eu postei um vídeo tutorial que explica como fazer um site responsivo passo a passo há algumas semanas. No vídeo, fizemos uma imagem responsiva. Neste artigo, no entanto, eu gostaria de dar um pouco mais de detalhes sobre como tornar as imagens responsivas.

Você também vai aprender sobre alguns dos problemas comuns que podem ocorrer quando você está tentando tornar imagens responsivas - e eu tentarei explicar como resolvê-los.

Como tornar imagens responsivas com CSS

Devo usar unidades relativas ou absolutas?

Tornar uma imagem fluida, ou responsiva, é bem simples. Quando você carrega uma imagem em seu site, ela tem largura e altura padrão. Você pode alterar ambos com CSS.

Para tornar uma imagem responsiva, você precisa dar um novo valor à sua propriedade de largura. Em seguida, a altura da imagem se ajustará automaticamente.

Uma coisa importante a se saber é que você deve usar sempre unidades relativas para a propriedade de largura, como porcentagem, ao invés de unidades absolutas como pixels.

img {
  width: 500px;
}

Por exemplo, se você definir uma largura fixa de 500px, sua imagem não será responsiva – porque a unidade é absoluta.

img {
  width: 50%;
}

É por isso que você deve atribuir uma unidade relativa, como 50%. Essa abordagem tornará suas imagens fluidas e elas poderão se redimensionar independentemente do tamanho da tela.

Devo usar media queries?

Uma das perguntas que mais recebo é se você deve ou não usar media queries.

Uma media query é outro recurso importante do CSS que ajuda a tornar um site responsivo. Não entrarei em mais detalhes aqui, mas você pode ler meu outro artigo (texto em inglês) mais tarde para aprender a usar consultas de mídia com mais detalhes.

A resposta para essa pergunta é: “depende”. Se você quer que a sua imagem tenha diferentes tamanhos de um dispositivo para outro, então você precisará utilizar media queries. Caso contrário, não.

Agora, para este exemplo, sua imagem tem 50% de largura para qualquer tipo de tela. Mas quando você deseja deixá-la em tamanho real para dispositivos móveis, precisará obter ajuda das media queries:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

Portanto, com base na regra da media query (consulta de mídia, em inglês), qualquer dispositivo menor que 480px terá o tamanho total da largura da tela.

Você também pode assistir a versão em vídeo deste artigo abaixo:

Por que a propriedade max-width não é ideal?

Outra maneira que os desenvolvedores podem usar para criar imagens responsivas é a propriedade max-width. No entanto, esse nem sempre é o melhor método a ser usado, pois pode não funcionar para todos os tipos de tamanho de tela ou dispositivo.

A primeira coisa a entender antes de prosseguirmos com um exemplo é o que exatamente a propriedade max-width faz.

A propriedade max-width define uma largura máxima para um elemento, o que não permite que a largura desse elemento seja maior que seu valor max-width (mas pode ser menor).

Por exemplo, se a imagem tiver uma largura padrão de 500px e se o tamanho da sua tela tiver apenas 360px, você não poderá ver a imagem completa porque não há espaço suficiente:

img {
  max-width: 100%;
  width: 500px;  // suponha que esse seja o tamanho padrão
}

Portanto, você pode definir uma propriedade max-width para a imagem e configurá-la para 100%, o que reduz a imagem de 500px para o espaço de 360px. Assim, você poderá ver a imagem completa em uma tela de tamanho menor.

A parte boa é que, como você está usando uma unidade relativa, a imagem será fluida em qualquer dispositivo menor que 500px.

Infelizmente, o tamanho da tela ficará um pouco maior que 500px, mas a imagem não, porque tem uma largura padrão de 500px. Essa abordagem quebrará a capacidade de resposta da imagem.

Para corrigir isso, você precisa usar a propriedade largura novamente, o que torna a propriedade max-width inútil.

E as alturas?

Outro problema comum que você pode encontrar tem a ver com a propriedade height (altura, em inglês). Normalmente, a altura de uma imagem se redimensiona automaticamente, então você não precisa atribuir uma propriedade height às suas imagens (porque isso acaba distorcendo um pouco a imagem).

Mas, em alguns casos, você pode ter que trabalhar com imagens que devem ter uma altura fixa. Portanto, quando você atribuir uma altura fixa à imagem, ela ainda será responsiva, mas não terá uma boa aparência.

img {
  width: 100%;
  height: 300px;
}

Felizmente, existe outra propriedade que o CSS oferece para corrigir esse problema…

Solução: a propriedade object-fit

Para ter mais controle sobre suas imagens, o CSS fornece outra propriedade chamada object-fit. Vamos usar a propriedade object-fit e atribuir um valor, que fará com que sua imagem fique com uma melhor apresentação:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

Se necessário, você também pode usar a propriedade object-position (além de object-fit) para focar em uma parte específica da imagem. Muitas pessoas não estão cientes da propriedade object-fit, mas ela pode ser útil para corrigir esses tipos de problemas.

Espero que este artigo tenha ajudado você a entender e resolver seus problemas com imagens responsivas. Se você quiser saber mais sobre desenvolvimento para a web, fique à vontade para conferir o canal do autor do texto no Youtube.

Obrigado pela leitura!

No passado, criar um site da web era muito mais simples. Hoje, um layout de site deve estar adaptado não apenas aos computadores, mas também a tablets, dispositivos móveis e até TVs.

Fazer um site da web com um layout adaptável é chamado de Design responsivo para a web. As media queries do CSS são uma das partes mais importantes do design responsivo. Neste artigo, vamos dar uma olhada mais de perto nas media queries e em como usá-las em CSS.

Se você preferir, pode assistir à versão em vídeo abaixo:

O que é uma media query?

Uma media query é um recurso do CSS3 que faz com que uma página da web se adapte ao seu layout para tamanhos de tela e tipos de mídia diferentes.

Sintaxe

@media tipo de mídia and (condição: breakpoint) {
  // regras de CSS
}

Podemos visar tipos de mídia diferentes sob uma variedade de condições. Se a condição e/ou tipos de mídia coincidirem, as regras dentro da media query serão aplicadas, o que não ocorre em outras circunstâncias.

A sintaxe pode parecer complicada de início, então vamos explicar cada parte em detalhes…

Regra de @Media

Começamos definindo media queries com a regra @media e, depois, incluímos as regras de CSS dentro das chaves. A regra de @ media também é usada para especificar os tipos de mídia de destino.

@media () {
  // regras de CSS
}

Parênteses

Dentro dos parênteses, definimos uma condição. Por exemplo, queremos aplicar um tamanho de fonte maior para dispositivos móveis. Para fazer isso, precisamos definir uma largura máxima, que é verificada em comparação com a largura de um dispositivo:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Normalmente, o tamanho do texto será de 14px. No entanto, como aplicamos uma media query, ele mudará para 16px quando um dispositivo tiver a largura máxima de 480px ou menos.

Importante: sempre coloque suas media queries ao final do arquivo CSS.

Tipos de mídia

Se não aplicarmos um tipo de mídia, a regra de @media selecionará todos os tipos de dispositivo por padrão. Do contrário, os tipos de mídia vêm logo após a regra de @media. Há muitos tipos de dispositivos, mas podemos agrupá-los em 4 categorias:

• all — para todos os tipos de mídia
• print — para impressoras
• screen — para telas de computador, tablets e smartphones
• speech — para leitores de tela que “leem” a página em voz alta

Por exemplo, quando eu desejo selecionar apenas as telas, usarei a palavra-chave screen logo após a regra de @media. Também concatenarei as regras com a palavra-chave “and”:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Breakpoints

Breakpoints são, talvez, o termo mais comum que você ouvirá e usará ao falarmos de media queries. Um breakpoint é uma chave para determinar o momento de mudar o layout e adaptá-lo às novas regras dentro das media queries. Vamos voltar ao nosso exemplo do início:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Aqui, o breakpoint é 480px. Agora, a media query sabe quando definir ou sobrescrever a nova classe. Basicamente, se a largura de um dispositivo for inferior a 480px, a classe text será aplicada. Do contrário, isso não acontece.

Breakpoints comuns: existe uma resolução padrão?

Uma das perguntas que é feita com maior frequência é “Qual é o breakpoint que eu devo usar?”. Há milhares de dispositivos no mercado. Assim, não podemos nem devemos definir breakpoints fixos para cada um deles.

É por isso que não podemos dizer que exista uma resolução padrão para dispositivos, mas há alguns breakpoints normalmente usados na programação do dia a dia. Se você estiver usando um framework de CSS (como o Bootstrap, o Bulma etc.), você também pode usar seus breakpoints.

Vamos ver agora alguns breakpoints comuns em termos de larguras dos dispositivos:

• 320px — 480px: dispositivos móveis
• 481px — 768px: iPads, tablets
• 769px — 1024px: telas pequenas, laptops
• 1025px — 1200px: desktops, telas grandes
• 1201px e acima —  telas muito grandes, TVs

Como dito anteriormente, esses breakpoints podem diferir e não há um padrão definido com exatidão, mas a lista acima compreende os que são usados normalmente.

Para encerrar

Usar o design responsivo é uma obrigação nos campos de design e desenvolvimento para a web nos dias de hoje. Media queries são uma das partes mais importantes na criação de layouts responsivos. Espero que este artigo tenha sido útil para você no sentido de entender como as media queries funcionam.

Se quiser saber mais sobre desenvolvimento para a web, se inscreva no canal do autor.

Obrigado pela leitura!