Działanie układu na telefonach.

Twoje strony same dopasowują się do telefonów i tabletów: kolumny stoją obok siebie na szerokich ekranach i układają w stos na małych. Ta strona pokazuje, jak przejąć kontrolę. Ustawiasz układ kolumn dla rozmiaru ekranu, odbijasz kolejność na szerokich ekranach i pokazujesz elementy tylko na niektórych urządzeniach. Przykład zamienia wiersz czterech kolumn w dwa po dwa na tabletach.

Film ukrywa zdjęcie na telefonach, potem zwęża okno, aby pokazać jego zniknięcie.

Zanim zaczniesz

• Wiersz z czterema równymi kolumnami na stronie; zobacz wiersze i kolumny.

Wybór układu dla rozmiaru ekranu

1. Najedź na wiersz i kliknij ikonę siatki na jego pasku narzędzi. Otworzy się okno układu z panelem Medium devices (≥ 768px).
2. Kliknij Add screen size. Otworzy się drugi panel, ustawiony na Extra small (< 576px).
3. W liście tego panelu wybierz Small devices (≥ 576px).
4. Kliknij Custom Layout, wpisz 1/2 + 1/2 + 1/2 + 1/2 i kliknij Save.
5. Kliknij Save na pasku narzędzi.

Cztery połówki zachowują wszystkie cztery kolumny i kładą dwie w każdym wierszu. Kafelek z dwiema równymi kolumnami ściąłby wiersz do dwóch kolumn w każdym rozmiarze ekranu.

Co widzisz

Na desktopie cztery kolumny nadal stoją w jednej linii. Zwęź okno przeglądarki poniżej 768 pikseli, a zawiną się dwa po dwa. Poniżej 576 pikseli układają się w stos, po jednym w wierszu, w kolejności widzianej w edytorze.

Układ obowiązuje od swojego rozmiaru ekranu w górę, dopóki większy rozmiar ekranu nie ma własnego układu. Każdy nowy wiersz zaczyna z jednym układem dla Medium devices (≥ 768px), więc jego kolumny układają się w stos na telefonach i małych tabletach. Remove screen size w panelu ponownie usuwa ten układ.

Odbicie kolejności na szerokich ekranach

Otwórz menu More wiersza, wybierz Settings i włącz Mirror row. Od 768 pikseli w górę kolumny pokazują się w odwrotnej kolejności; na mniejszych ekranach układają się w stos w kolejności edytora.

Użyj tego do naprzemiennych wierszy obrazu i tekstu. Umieść obraz jako pierwszy w edytorze, aby telefony pokazywały go nad tekstem, i odbijaj co drugi wiersz, aby desktopy pokazywały obraz po prawej.

Pokazywanie i ukrywanie elementu dla rozmiaru ekranu

1. Otwórz menu More elementu i wybierz Settings.
2. W HTML classes wybierz chip z grupy Responsive Visibility, na przykład Hidden on extra small devices, phones (<576px).
3. Kliknij Save.

Każdy chip Hidden on ukrywa element tylko w jednym rozmiarze ekranu. Każdy chip Visible on pokazuje go w tym jednym rozmiarze i ukrywa wszędzie indziej.

Rozmiary ekranu

Element Positioned layers ma własny przełącznik Responsive, domyślnie wyłączony. Włącz go, aby skalować wysokość kanwy i jej tekst z szerokością okna, aby kompozycja zachowała proporcje.

Jeśli nie widzisz zmiany

• Kolumny nadal układają się w stos na tablecie. Wiersz nie ma układu dla tego rozmiaru ekranu, więc kolumny układają się w stos poniżej 768 pikseli. Otwórz ikonę siatki wiersza, kliknij Add screen size i wybierz Small devices (≥ 576px).
• Element zniknął w każdym rozmiarze ekranu. Niesie dwa chipy Visible on, a każdy ukrywa go tam, gdzie drugi go pokazuje. Zachowaj jeden albo użyj chipów Hidden on, po jednym na rozmiar do ukrycia.
• Mirror row nic nie robi na telefonie. Mirror row działa od 768 pikseli w górę. Aby zmienić kolejność na telefonach, przenieś kolumny w edytorze.

Co dalej?

• Wiersze i kolumny: zbuduj wiersze, które tutaj uniezależniasz od rozdzielczości.
• Edytowanie strony na telefonie albo tablecie: sprawdzaj i naprawiaj strony na małym ekranie.
• Uruchomienie sekcji od krawędzi do krawędzi: zdecyduj, jak szeroko biegnie treść.