Como usar pontos de interrupção CSS para criar designs responsivos

O sucesso de um site depende muito da experiência do usuário. Atualmente, os usuários acessam um site de vários dispositivos diferentes, e fornecer uma experiência de usuário igual em cada dispositivo pode ser um desafio. É aí que os pontos de interrupção CSS podem ser úteis.

Pontos de interrupção CSS podem ser altamente benéficos para a criação de sites responsivos que proporcionam uma ótima experiência ao usuário em qualquer dispositivo, mas também continuam sendo um dos aspectos mais confusos do web design, especialmente para novos desenvolvedores.

Vamos começar!

O que é um ponto de interrupção CSS?

Os breakpoints CSS são pontos onde o conteúdo do site responde de acordo com a largura do dispositivo, permitindo que você mostre o melhor layout possível para o usuário.

Pontos de interrupção CSS também são chamados de pontos de interrupção de consulta de mídia, pois são usados ​​com consulta de mídia.

Neste exemplo, você pode ver como o layout se adapta ao tamanho da tela. O layout em resolução grande tem um layout de cabeçalho e corpo de duas colunas, mas em dispositivos pequenos ele se transforma em layout de uma coluna.

Como definir pontos de interrupção CSS

A parte complicada é decidir os próprios pontos de interrupção. Não há modelos padrão e estruturas diferentes usam pontos de interrupção diferentes.

Então, qual abordagem você deve adotar para seus pontos de interrupção?

Existem duas abordagens prováveis ​​a seguir:

• Pontos de interrupção com base no dispositivo
• Pontos de interrupção com base no conteúdo

Pontos de interrupção CSS com base no dispositivo

Decidir pontos de interrupção com base em dispositivos diferentes parece uma boa ideia, mas, na realidade, nem sempre é a melhor abordagem. Já temos dispositivos suficientes para nos preocupar, e quando um novo sai com uma largura diferente, voltar ao seu CSS e adicionar um novo ponto de interrupção novamente é demorado.

No entanto, ainda é uma opção viável, pois você pode achar que funciona bem para você. Aqui está um exemplo de pontos de interrupção específicos do dispositivo:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Com essa abordagem, você acabará tendo uma lista enorme de consultas de mídia.

Pontos de interrupção CSS com base no conteúdo

A opção ideal para decidir pontos de interrupção é baseada no conteúdo do seu site. Esse método permite que você simplesmente adicione pontos de interrupção onde seu conteúdo precisa de ajuste de layout. Isso tornará sua consulta de mídia muito mais simples e gerenciável.

Esse ponto de interrupção significa que o CSS será aplicado quando a largura do dispositivo for 768px ou superior.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Você também pode definir um intervalo com pontos de interrupção, para que o CSS seja aplicado apenas dentro desses limites.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Quando usar pontos de interrupção CSS de largura mínima ou máxima

Você pode definir seus pontos de interrupção de diferentes maneiras usando min-width , max-width ou até mesmo combinando ambos. Mas a questão é, quando você deve usar cada um?

Para responder de maneira simples, se você estiver projetando seu layout com uma abordagem mobile-first, use pontos de interrupção de largura mínima e suba.

Defina seus estilos padrão para o dispositivo pequeno e apenas ajuste para dispositivos maiores de acordo.

Da mesma forma, se você estiver projetando para dispositivos maiores primeiro, defina seu CSS padrão como faria normalmente e ajuste para dispositivos menores com a abordagem de largura máxima.

Usando pontos de interrupção CSS com SASS

Se você estiver usando um pré-processador como SASS ou SCSS, poderá escrever pontos de interrupção muito mais inteligentes. O Mixin permite que você crie pontos de interrupção mais declarativos para lembrar, assim:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Ao trabalhar em grupo, é muito mais fácil lembrar “tablet-up” do que 768px ou 48em. Qualquer um pode entender esse ponto de interrupção; é para tablets e tamanhos de tela acima.

Quais pontos de interrupção CSS usar

Vimos como usar pontos de interrupção e quando usá-los, mas a pergunta ainda permanece: quais pontos de interrupção específicos você deve usar?

Vamos quebrar as coisas um pouco. Você precisa segmentar tamanhos de desktop, tablet e somente dispositivos móveis. Você pode verificar alguns frameworks populares para ter uma ideia de qual abordagem seguir.

Bootstrap tem pontos de interrupção em 576px, 768px, 992px e 1200px. A fundação tem principalmente pontos de interrupção em 40em e 64em. Na Bulma, os pontos de interrupção são definidos em 768px, 769px, 1024px, 1216px e 1408px.

Cada um tem pontos de interrupção diferentes, mas uma coisa que eles têm em comum é uma abordagem mobile-first. Você pode usar um desses pontos de interrupção como ponto de partida ou criar o seu próprio, assim:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Você entendeu a ideia!

Empacotando

Para resumir, os pontos de interrupção CSS são uma ótima maneira de reestruturar seu layout para fornecer a melhor experiência do usuário em diferentes dispositivos.

Sempre tente criar pontos de interrupção com base em seu próprio conteúdo, não em dispositivos. Divida-os em uma largura lógica em vez de uma largura aleatória e mantenha-os em um número gerenciável, para que a modificação permaneça simples e clara.

Quais pontos de interrupção CSS você usa para seus layouts? Deixe-nos saber na seção de comentários abaixo.

Qual é o próximo?

Crie e teste seus blocos personalizados do Gutenberg com o Local gratuitamente!

Saiba mais sobre o Local aqui!

Para obter mais conselhos sobre como criar sites responsivos, confira estes artigos!

• Como tornar seu site WordPress compatível com dispositivos móveis
• Como criar um menu de navegação responsivo no WordPress
• 7 dicas de práticas recomendadas para web design responsivo