Visão geral dos pontos de interrupção
Os pontos de interrupção são intervalos de pixels que correspondem à largura de diferentes dispositivos, como desktops, tablets e celulares. Quando a largura de um dispositivo está dentro de um intervalo de pixels predefinido de pontos de interrupção, o layout do site é ajustado para que o conteúdo e o design sejam otimizados para o tamanho e a orientação daquele dispositivo. Por exemplo, se eu estiver visualizando um site em um computador desktop, posso ver o menu completo do site, mas quando visualizo o site em meu dispositivo móvel, vejo um menu hambúrguer em vez disso.
Observação:
Este artigo é relevante apenas para usuários que começaram a usar o Flex após 18 de julho de 2022. Se você estiver usando a versão 1.0 do Flex, consulte Pontos de interrupção do Flex (1.0).
Pontos de interrupção flexíveis
O ponto de interrupção principal do Flex é o desktop. Se você fizer alterações de design ou conteúdo no ponto de interrupção para desktop, as alterações serão aplicadas automaticamente aos outros pontos de interrupção para desktop (wide), tablet e celular. Se você alterar o conteúdo, como adicionar um widget, substituir uma imagem ou editar um texto, a alteração será aplicada automaticamente a todos os outros pontos de interrupção, independentemente do ponto de interrupção em que a alteração foi feita.
No entanto, se você alterar a posição ou o tamanho de um elemento em pontos de interrupção específicos, as alterações não serão aplicadas a outros pontos de interrupção. Por exemplo, se você alterar o tamanho de um elemento no ponto de interrupção para dispositivos móveis, a alteração será aplicada apenas aos pontos de interrupção para dispositivos móveis e para dispositivos móveis em modo paisagem, e a nenhum outro ponto de interrupção.
Em Flex, os pontos de interrupção padrão são:
-
Área de trabalho (1025px-1399px)
-
Área de trabalho ampla (1400px ou mais)
-
Tablet (768px-1024px)
-
Dispositivos móveis (767px e inferiores)
-
Paisagem móvel (468px-767px)
Observação:
Recomendamos verificar as alterações de ponto de interrupção em dispositivos móveis em um dispositivo móvel, em vez de redimensionar a tela de um computador.
Você pode alternar entre os pontos de interrupção na parte superior da página clicando nas diferentes visualizações.
Mudanças estruturais
Alterações estruturais feitas em qualquer ponto de interrupção afetam todos os outros pontos de interrupção. Quando você estiver em um ponto de interrupção diferente do ponto de interrupção principal (área de trabalho) e fizer uma alteração estrutural, uma mensagem de aviso será exibida informando que a alteração afeta todos os pontos de interrupção. Alterações estruturais incluem alterações de conteúdo ou layout, como adicionar ou excluir seções, colunas, flexboxes, widgets ou grades avançadas.
Ocultar no ponto de interrupção
Você pode ocultar determinados elementos em pontos de interrupção específicos no painel de camadas ou no menu flutuante do elemento. Por exemplo, você pode ocultar uma imagem em dispositivos móveis sem que isso afete outros pontos de interrupção.
Observação:
Se você ocultar um elemento que contém outros elementos aninhados, todos os elementos aninhados também serão ocultados nesse ponto de interrupção. Por exemplo, se você ocultar uma coluna flexível, os widgets dentro dessa coluna flexível também serão ocultados.
Para ocultar um elemento em um ponto de interrupção específico:
-
Alterne para o ponto de interrupção em que deseja ocultar o elemento clicando na visualização na barra de navegação superior.
-
Clique no elemento que deseja ocultar.
-
Clique no ícone de três pontos horizontais (
) no menu flutuante e selecione Ocultar neste ponto de interrupção . Ou, no painel de camadas, clique em Ocultar neste ponto de interrupção ao lado do elemento.
Substituições de ponto de interrupção
Ao alterar o conteúdo, você pode fazer a alteração a partir de qualquer ponto de interrupção e ela afetará todos os pontos de interrupção. No entanto, há momentos em que é necessário ignorar um ponto de interrupção. Por exemplo, no ponto de interrupção principal, uma imagem está à direita de um parágrafo, mas em dispositivos móveis você precisa que a imagem fique acima e o parágrafo abaixo.
A seguir, apresentamos as alterações que você pode fazer em um elemento e que substituem o ponto de interrupção principal:
-
Alinhamento
-
Posição
-
Tamanho
-
Espaçamento
Observação:
Depois de ignorar um ponto de interrupção, você não poderá reverter a alteração modificando o estilo no ponto de interrupção principal do mesmo objeto.
