{"id":38840,"date":"2023-08-02T11:24:38","date_gmt":"2023-08-02T14:24:38","guid":{"rendered":"\/tutoriais\/?p=38840"},"modified":"2026-03-10T13:00:32","modified_gmt":"2026-03-10T16:00:32","slug":"breakpoints-css","status":"publish","type":"post","link":"\/pt\/tutoriais\/breakpoints-css\/","title":{"rendered":"Como usar breakpoints CSS para design responsivo + dicas dos breakpoints de m\u00eddia mais comuns"},"content":{"rendered":"

Breakpoints CSS, ou pontos de quebra, são valores que determinam a aparência de um site em diferentes tamanhos de tela. Quando os dispositivos dos visitantes atingem seus breakpoints, o conteúdo do site responde e se ajusta para se adaptar ao display onde está sendo exibido.<\/p>

Juntamente com as media queries do CSS, esses breakpoints são responsáveis ​​por um design de site responsivo. Resumindo, eles fazem seu site parecer proporcional quando visualizado num tamanho de tela diferente.<\/p>

Neste artigo, mostraremos como implementar breakpoints CSS em seu site. Você também receberá dicas sobre como usá-los para ter um web design responsivo.<\/p>

Baixar Glossário Completo de Desenvolvimento Web<\/a><\/p>

\n\n\n\n\n<\/p>

<\/p>

\n \n \n <\/svg>\n

\n O Que É um Breakpoint CSS?\n <\/p>\n <\/div>\n

Um breakpoint CSS é um valor que determina o tamanho e o layout de um site em diferentes tamanhos de tela. Ele cria um design de site responsivo quando implementado com uma media query CSS.<\/p><\/div>\n\n\n\n<\/p>

O valor de um breakpoint é definido com base na altura ou largura do dispositivo do usuário. Embora normalmente sejam mostrados em pixels, os breakpoints também podem usar unidades CSS como em<\/strong>, rem<\/strong> ou porcentagens<\/strong>.<\/p>

Com breakpoints e media queries, você pode definir diferentes condições e ajustar o conteúdo do site com base nelas. Por exemplo, você pode mostrar a barra de navegação apenas em dispositivos com telas grandes.<\/p>

Para aplicar breakpoints e media queries, você só pode usar um tipo de CSS<\/a> externo. Para isso, você deve criar e vincular uma folha de estilo ao arquivo HTML do seu site<\/a>.<\/p>

Como Definir Breakpoints CSS<\/h2>

Existem duas maneiras de definir breakpoints CSS: com base no dispositivo ou no conteúdo do site.<\/p>

\n
\n \n \n <\/svg>\n

\n Leitura Sugerida <\/p>\n <\/div>\n

Antes de prosseguir, sugerimos que você confira a nossa <a href=\"Folha de dicas CSS, especialmente se você não estiver familiarizado com a linguagem de estilo.<\/p>\n <\/div>\n \n\n\n\n<\/p>

Como Usar Breakpoints com Base no Dispositivo<\/h3>

Os breakpoints podem usar a largura e o comprimento do dispositivo como parâmetros, geralmente mostrados em valores de pixel. Aqui está um exemplo deles:<\/p>

  <div><pre><code class=\"mw-64 mw-22-md d-block language-css line-numbers\">\/* Portrait iPhone 6 to 8 *\/\n@media only screen\nand (min-width: 375px)\nand (max-width: 667px)\nand (-webkit-min-device-pixel-ratio: 2)\nand (orientation: portrait){\n...\n}<\/code><\/pre><\/div><\/pre>
No entanto, determinar breakpoints baseados no dispositivo pode ser complicado, pois suas resoluções de tela variam. Também é demorado, pois os desenvolvedores devem adicionar breakpoints CSS toda vez que um novo dispositivo é lançado.<\/p>
Em vez de definir pontos de quebra para dispositivos específicos, você pode agrupá-los com base em resoluções. Aqui está o exemplo de código:<\/p>
\/* Small devices (portrait tablets and large phones, 600px and up) *\/\n@media only screen and (min-width: 600px) {...}\n\/* Medium devices (landscape tablets, 768px and up) *\/\n@media only screen and (min-width: 768px) {...}\n\/* Extra large devices (large laptops and desktops, 1200px and up) *\/\n@media only screen and (min-width: 1200px) {...}<\/pre>
Embora seja possível definir breakpoints apenas para dispositivos populares, não recomendamos isso, pois seu público-alvo pode usar aparelhos diferentes e variados.<\/p>
Como Usar Breakpoints com Base no Conteúdo<\/h3>
Você pode definir seus breakpoints com base no conteúdo do seu site. Como resultado, você não precisará adicionar um novo ponto de quebra sempre que um dispositivo for lançado, economizando tempo e mantendo o código do site limpo.<\/p>
Com esse método, você adiciona breakpoints nas posições em que o conteúdo começa a parecer desalinhado ou distorcido quando renderizado em um tamanho de tela diferente.<\/p>
Você pode definir o parâmetro de duas maneiras: usando um valor ou um intervalo de pixel de largura mínima. Por exemplo, o trecho a seguir executará o código CSS para dispositivos com largura mínima de tela de 720<\/strong> pixels:<\/p>
        <div><pre class=\" language-css line-numbers\"><code class=\"mw-64 mw-22-md d-block language-css\"><span class=\"token atrule\"><span class=\"token rule\">@media<\/span> only screen <span class=\"token punctuation\">(<\/span><span class=\"token property\">min-width<\/span><span class=\"token punctuation\">:<\/span> 720px<span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">{<\/span>\n...\n<span class=\"token punctuation\">}<\/span><span aria-hidden=\"true\" class=\"line-numbers-rows\"><span><\/span><span><\/span><span><\/span><\/span><\/code><\/pre><\/div><\/pre>
Enquanto isso, o seguinte se aplica se a largura do dispositivo estiver entre 720<\/strong> e 1280<\/strong> pixels:<\/p>
        
@media only screen and (min-width: 720px) and (max-width: 1280px){\n…\n}<\/code><\/pre><\/div>\n        <\/pre>
Como Usar Breakpoints CSS min-width ou max-width<\/h2>
Além disso, você pode definir breakpoints usando um valor específico com min-width <\/strong>(largura mínima), max-width<\/strong> (largura máxima) ou ambos para definir um intervalo. Cada um deles é ideal para um caso de uso específico.<\/p>
Use breakpoints do tipo min-width<\/strong> ao desenvolver um site com a abordagem focada em dispositivos móveis. Isso significa que você define o CSS padrão para a tela menor e o ajusta para telas maiores.<\/p>
Por outro lado, ao desenvolver para dispositivos maiores, use breakpoints de max-width<\/strong> e reorganize seu site para telas menores. Use ambos somente quando precisar ter certeza sobre a aparência do seu site num determinado dispositivo.<\/p>
        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Dica                <\/p>\n            <\/div>\n            
Além do ajuste da tela, você pode usar o breakpoint com outras media queries, como print (impressão) e speech (fala).<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Breakpoints de Media Query<\/h2>
Para definir seus breakpoints de media query, determine quais dispositivos os visitantes usam para renderizar seu site. Eles podem usar computadores, tablets ou telefones celulares.<\/p>
Os breakpoints comuns para esses dispositivos são baseados em sua resolução. Algumas das mais populares são 1920 x 1080, 1366 x 768 e 360 x 640.<\/p>
Como alternativa, você pode usar breakpoints de estruturas diferentes. Como eles são otimizados para a abordagem mobile-first — focada em dispositivos móveis — use-os como referência ao desenvolver para dispositivos de tela maior.<\/p>
Aqui estão alguns exemplos de frameworks populares com seus breakpoints:<\/p>