Pontos de quebra - visão geral
ponto de interrupção são intervalos de pixel que correspondem à largura de diferentes aparelhos, como desktop, tablet e celular. Quando a largura de um aparelho está dentro do intervalo de pixel pré-definido de um ponto 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 do aparelho. No desktop, por exemplo, aparece o menu completo do site; porém, quando eu vejo o site na versão móvel, eu aparece um menu tipo hambúrguer.
Pontos de quebra do Flex
O principal ponto de interrupção do Flex é o desktop. As alterações no design ou no conteúdo do ponto de interrupção do desktop são aplicadas automaticamente aos outros pontos de interrupção para desktop wide, tablet e celular. Alterações no conteúdo (como adição de widget, troca de imagem ou edição no texto) são aplicadas automaticamente a todos os outros pontos de interrupção, não importa em qual ponto de interrupção a alteração foi feita.
No entanto, alterações na posição ou no tamanho de um elemento em pontos de interrupção específicos não são aplicadas a outros pontos de interrupção. Por exemplo: alterações no tamanho de um elemento no ponto de interrupção da versão móvel são aplicadas somente aos pontos de interrupção na versão móvel (e no modo paisagem da versão móvel).
No Flex, o padrão dos pontos de interrupção é:
Desktop (1.025 px por 1.399 px)
Desktop largo (a partir de 1.400 px)
Tablet (768 px por 1.024 px)
Celular (até 767 px)
Paisagem no celular (468 px por 767 px)
Recomendamos conferir as alterações nos pontos de interrupção na versão móvel em um celular, em vez de ajustar o tamanho na tela de desktop.
Para trocar os pontos de interrupção, clique nas diferentes exibições no topo da página.
Mudanças estruturais
As alterações estruturais feitas num ponto de interrupção afetam todos os outros pontos de interrupção. Ao fazer uma alteração estrutural num ponto de interrupção diferente do ponto de interrupção principal (área de trabalho), aparece um aviso de que essa alteração afeta todos os pontos de interrupção. Alterações estruturais envolvem mudanças no conteúdo ou layout, tais como adicionar ou apagar seções, colunas, Inner Columns, widgets, ou grades avançadas.
Oculte no ponto de quebra
Você pode ocultar determinados elementos em pontos de interrupção específicos pelo painel de camadas ou pelo menu flutuante do elemento. É possível, por exemplo, ocultar uma imagem na versão móvel sem afetar outros pontos de interrupção.
Ao ocultar um elemento com outros elementos aninhados nele, esses elementos aninhados também ficarão ocultos nesse ponto de interrupção. Por exemplo: se você ocultar uma coluna flex, também esconderá os widgets dentro dela.
Para ocultar um elemento num ponto de interrupção específico:
Clique na exibição na navegação superior para mudar para o ponto de interrupção onde o elemento deve ser ocultado.
Clique no elemento a ser ocultado.
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 no ponto de quebra
Ao mudar o conteúdo, você pode fazer a alteração em qualquer ponto de interrupção; isso afeta todos os pontos de interrupção. No entanto, tem momentos em que é necessário substituir um ponto de interrupção. Por exemplo: no ponto de interrupção principal, a imagem fica à direita de um parágrafo; na versão móvel, porém, você precisa que a imagem fique em cima, e o parágrafo, embaixo.
A seguir estão as alterações que você pode fazer num elemento e substituir o ponto de interrupção principal:
Alinhamento
Personalizar
Tamanho
Espaçamento
Após substituir um ponto de interrupção, não é possível reverter a alteração se alterar o estilo no ponto de interrupção principal no mesmo objeto.