Punkty przełamania CSS

W przypadku korzystania z domyślnych szablonów system zastosuje różne punkty przełamania podczas przełączania się między urządzeniami mobilnymi, tabletami i komputerami stacjonarnymi. Punkty przełamania to:

Minimal

  • Rozmiar ekranu poniżej 321 pikseli szerokości lub 321 pikseli wysokości
  • Rozmiar czcionki został dostosowany do 0,38
  • Wysokość wiersza jest ustawiona na 1,05 em
  • Odstępy w ramce zostały zmniejszone do 5 pikseli
  • Rozmiar ekranu poniżej 450×450: rozmiar ramki jest dostosowywany do 100%100%

Urządzenia mobilne: orientacja pionowa

  • Rozmiar ekranu poniżej 480 pikseli szerokości i 926 pikseli wysokości
  • Szerokość ramki zwiększona do 100%, a minimalna wysokość do 300 pikseli
  • Przyciski znajdują się poniżej treści
  • Logo jest ukryte
  • Zmniejszono wypełnienie
  • Dodatkowo: Jeśli rozmiar ekranu jest mniejszy niż 414×736 lub 736×414 (np. iPhone 6/7/8), odstępy w ramce są zmniejszane

Urządzenia mobilne: orientacja pozioma

  • Rozmiar ekranu poniżej 926 pikseli szerokości i 480 pikseli wysokości
  • Szerokość pola zwiększona do 100%, a minimalna wysokość do 150 pikseli
  • Przyciski są umieszczone po prawej stronie treści i mają szerokość 250 pikseli
  • Logo jest ukryte
  • Zmniejszono wypełnienie
  • Dodatkowo: Jeśli rozmiar ekranu jest mniejszy niż 414×736 lub 736×414 (np. iPhone 6/7/8), odstępy w ramce są zmniejszane

Komputery stacjonarne i tablety

  • Rozmiar ekranu powyżej 926×480 lub 480×926

Dodatkowe zapytania o media

Warstwy ustawione jako „na dole/na całej szerokości”, „na górze/na całej szerokości” i „przesuń w dół”:

  • Maksymalna szerokość 1500 pikseli: Treść (nagłówek, tekst i cele) warstwy zgody zostanie zmniejszona do „100% – 450 pikseli”, aby wyświetlić przyciski po prawej stronie treści.
  • Maksymalna szerokość 1200 pikseli: Treść (nagłówek, tekst i cele) warstwy zgody zostanie zmniejszona do „100% – 250 pikseli”, aby wyświetlić przyciski po prawej stronie treści. To
  • Maksymalna szerokość 800 pikseli: Treść (nagłówek, tekst i cele) warstwy zgody zostanie rozciągnięta do 100%, aby wyświetlić przyciski poniżej treści.

Warstwy umieszczone jako „na dole/po prawej”, „na dole/pośrodku”, „w środku/pośrodku” i „na górze/pośrodku”:

  • Maksymalna szerokość 600 pikseli: rozmiar ramki jest dostosowywany do 100% szerokości.

Warstwy ustawione jako „środek/centrum”:

  • Maksymalna wysokość 600 pikseli i minimalna szerokość 926 pikseli: rozmiar pola jest dostosowywany do pełnej wysokości, a zawartość jest ustawiona na flex z overflow auto, aby zapobiec sytuacji, w której pole byłoby zbyt wysokie dla okna.

Warstwy ustawione jako „prawa/pełna wysokość” i „lewa/pełna wysokość”:

  • Maksymalna szerokość 400 pikseli: rozmiar ramki jest dostosowywany do 100% szerokości.

Strona ustawień niestandardowych:

  • Maksymalna szerokość 570 pikseli: nawigacja została przeniesiona na górę, aby zapewnić wystarczającą ilość miejsca na treść

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!