Para saber como deixar o site responsivo, consulte Tablet responsivo.
Ponto de interrupção é o tamanho ao qual o design se ajusta numa largura específica da tela. Com esses pontos, o design continua funcional à medida que aumenta ou diminui. 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)
Para o melhor resultado, cheque as alterações nos pontos de quebra na versão móvel; não ajuste o tamanho na do desktop.
Para trocar os pontos de interrupção, clique nas diferentes exibições no topo da página.
As alterações feitas no ponto de interrupção principal (desktop) afetam os demais pontos. No entanto, se você precisar mudar a posição e o tamanho dos elementos (alterações superficiais) de pontos de interrupção específicos (como no modo "paisagem" do celular), as alterações não afetarão os outros modos. As alterações feitas no ponto de interrupção no modo Celular ( retrato) afetam o ponto de interrupção Paisagem no celular.
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. Confira alguns exemplos de mudança estrutural:
Apagar ou adicionar conteúdo
Arrastar um widget para dentro do flexbox
Excluir o widget de um flexbox e colocá-lo na grade
Apagar um widget dentro do recipiente
e muito mais
Oculte no ponto de interrupção
Recomendamos ocultar certos elementos em pontos de interrupção específicos (como uma imagem na versão móvel).
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.
- No painel "Camadas", clique no botão Ocultar neste ponto de interrupção ao lado do elemento.
Se você ocultar um elemento que contenha outros elementos aninhados (por exemplo: ocultar um recipiente com dois widgets de botão no recipiente), todos os elementos aninhados também ficarão ocultos nesse ponto de interrupção.
Para mostrar um elemento: no painel "Camadas", clique em Mostrar neste ponto de interrupção ao lado do elemento oculto.
Ocultar elementos no ponto de interrupção principal não afeta os outros pontos de interrupção. Um botão oculto no ponto de interrupção principal, por exemplo, ainda ficará visível no ponto de interrupção do tablet (e em todos os outros pontos de interrupção).