Design responsivo
Seu site deve ter uma boa aparência em qualquer tela. O editor permite conferir suas páginas nas larguras de celular, tablet e computador e aplicar estilos diferentes aos elementos para cada tamanho de tela.
Confira outras larguras de tela
Clique no menu de largura (o ícone de dispositivo à esquerda da barra de caminho) e escolha uma largura. A área de edição muda de tamanho para você ver como a página fica naquela tela.
| Opção | Largura |
|---|---|
| Celular pequeno | 320px |
| Celular | 375px |
| Celular grande | 425px |
| Tablet | 768px |
| Computador | Largura total |
Você também pode pressionar D para computador, T para tablet (768px) ou M para celular (375px) quando não estiver digitando.
Mudar a largura não altera nenhum estilo. Apenas redimensiona a área de edição.
Aplique estilos por tamanho de tela
Um estilo pode ter um prefixo de tamanho de tela para ser aplicado apenas a partir daquela largura.
| Prefixo | Aplicado a partir de |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
Por exemplo, text-2xl md:text-4xl deixa o texto de um título menor em celulares e maior em tablets e telas maiores.
Para adicionar um estilo assim, selecione o elemento e abra a seção Avançado do painel de edição. Digite a classe no campo Digite uma classe e pressione Enter e pressione Enter. Depois, alterne entre as larguras para conferir o resultado.
Você também pode pedir com suas próprias palavras. Selecione o elemento, pressione ⌘K / Ctrl+K e digite algo como "ocultar no celular" ou "empilhar no celular". Veja Editar com IA.
Oculte elementos em algumas telas
Adicione hidden para ocultar um elemento em todas as telas. Depois, adicione uma classe com um ponto de quebra para exibi-lo a partir daquela largura:
hidden md:blockoculta o elemento em celulares e o exibe em tablets e telas maiores.md:hiddenexibe o elemento em celulares e o oculta em tablets e telas maiores.