Adaptar o esquema aos telemóveis.
As páginas adaptam-se sozinhas a telemóveis e tablets: as colunas ficam lado a lado em ecrãs largos e empilham em ecrãs pequenos. Esta página mostra como assumir o controlo. Define um esquema de colunas por tamanho de ecrã, espelha a ordem em ecrãs largos e mostra elementos apenas em alguns dispositivos. O exemplo transforma uma linha de quatro colunas em duas por duas em tablets.
O vídeo esconde uma foto em telemóveis e depois estreita a janela para a ver desaparecer.
Antes de começar
- Uma linha com quatro colunas iguais na página; consulte Linhas e colunas.
Escolher um esquema por tamanho de ecrã
- Paire sobre a linha e clique no ícone de grelha na barra de controlos. O diálogo de esquema abre com um painel Medium devices (≥ 768px).
- Clique em Add screen size. Um segundo painel abre, definido como Extra small (< 576px).
- Na lista desse painel, escolha Small devices (≥ 576px).
- Clique em Custom Layout, escreva
1/2 + 1/2 + 1/2 + 1/2e clique em Save. - Clique em Save na barra de ferramentas.
Quatro metades mantêm as quatro colunas e põem duas em cada linha. O mosaico com duas colunas iguais cortaria a linha para duas colunas em todos os tamanhos de ecrã.
O que vê
No computador, as quatro colunas continuam numa linha. Estreite a janela do navegador abaixo de 768 píxeis e passam a duas por duas. Abaixo de 576 píxeis empilham, uma por linha, na ordem vista no editor.
Um esquema aplica-se do tamanho de ecrã para cima, até um tamanho maior ter esquema próprio. Cada linha nova começa com um esquema para Medium devices (≥ 768px), por isso as colunas empilham em telemóveis e tablets pequenos. Remove screen size num painel elimina outra vez esse esquema.
Espelhar a ordem em ecrãs largos
Abra o menu More da linha, escolha Settings e ligue Mirror row. A partir de 768 píxeis, as colunas aparecem por ordem inversa; em ecrãs mais pequenos empilham na ordem do editor.
Use para linhas alternadas de imagem e texto. Ponha a imagem primeiro no editor, para os telemóveis a mostrarem acima do texto, e espelhe cada segunda linha para os computadores mostrarem a imagem à direita.
Mostrar ou esconder um elemento por tamanho de ecrã
- Abra o menu More do elemento e escolha Settings.
- Em HTML classes, escolha um chip do grupo Responsive Visibility, por exemplo Hidden on extra small devices, phones (<576px).
- Clique em Save.
Cada chip Hidden on esconde o elemento num só tamanho de ecrã. Cada chip Visible on mostra-o nesse tamanho e esconde-o nos restantes.
Tamanhos de ecrã
| Label in the layout dialog | Screen width |
|---|---|
| Extra small (< 576px) | Telemóveis ao alto |
| Small devices (≥ 576px) | Telemóveis grandes, tablets pequenos |
| Medium devices (≥ 768px) | Tablets |
| Large devices (≥ 992px) | Portáteis |
| Extra large (≥ 1200px) | Computadores |
| Extra extra large (≥ 1400px) | Computadores grandes |
Um elemento Positioned layers tem o próprio interrutor Responsive, desligado por predefinição. Ligue-o para dimensionar a altura da área e o texto com a largura da janela, para a composição manter as proporções.
Se a alteração não aparece
- Columns still stack on a tablet. A linha não tem esquema para esse tamanho de ecrã, por isso as colunas empilham abaixo de 768 píxeis. Abra o ícone de grelha da linha, clique em Add screen size e escolha Small devices (≥ 576px).
- An element disappeared on every screen size. Tem dois chips Visible on, e cada um esconde-o onde o outro o mostra. Mantenha um, ou use chips Hidden on, um por tamanho a esconder.
- Mirror row does nothing on a phone. Mirror row funciona a partir de 768 píxeis. Para mudar a ordem em telemóveis, mova antes as colunas no editor.
O que se segue?
- Linhas e colunas: construa as linhas que aqui torna responsivas.
- Editar uma página no telemóvel ou tablet: verifique e corrija páginas num ecrã pequeno.
- Estender uma secção de borda a borda: decida a largura do conteúdo.