Zero Block: Responsive Design

Zero Block ma dwa obszary robocze, które nazywane są kontenerami. Obszar siatki nazywany jest kontenerem siatki, podczas gdy kontener okna to obszar wskazujący granice ekranu przeglądarki.

Kontener siatki jest głównym obszarem roboczym. Ma taką samą siatkę jak Tilda. Jeśli umieścisz elementy wewnątrzkontenera siatki, znajdą się one wewnątrz dwunastokolumnowej siatki niezależnie od rozmiaru ekranu.

Na osi X kontener siatki jest zawsze wyśrodkowany.

To samo dzieje się z wersjami dla różnych urządzeń: gdy przełączasz się między typami ekranu, szerokość kontenera siatki zmienia się na 980, 640, 480, 320 pikseli, pozostaje stała i wyśrodkowana.

Wysokość kontenera siatki można ustawić w ustawieniach obszaru roboczego lub przeciągając kontener w górę / w dół za pomocą myszy. Dla każdej rozdzielczości można ustawić inną wysokość kontenera siatki. Wysokość kontenera siatki to wysokość bloku.

Jeśli chcesz, aby strona Zero Block zawsze zajmowała 100% wysokości ekranu, musisz ustawić wysokość kontenera okna na inną niż wysokość kontenera siatki. Należy więc ustawić wysokość kontenera okna na 100% w ustawieniach obszaru roboczego.

Następnie wybierz wyrównanie kontenera siatki na ekranie: Góra, Środek, Dół lub Rozciągnięcie. Domyślnie jest on wyśrodkowany.

Domyślnie wszystkie elementy są dołączone do kontenera siatki, a początek znajduje się w lewym górnym rogu.

Czasami trzeba dołączyć element nie do siatki, ale do ekranu. Na przykład, chcesz, aby logo było zamocowane w lewym górnym rogu na wszystkich ekranach.

Aby to zrobić, otwórz panel ustawień elementu i zmień typ kontenera na Window Container. Początek zostanie przesunięty do lewego górnego rogu kontenera okna.

Teraz logo będzie znajdować się w lewym górnym rogu ekranu.

Jeśli chcesz dołączyć element, na przykład do prawego górnego rogu, możesz użyć tej samej metody: wybierz "Window Container" i ustaw początek współrzędnych elementu w następujący sposób: X-prawy, Y-górny.

Każdy element w obszarze roboczym ma własne współrzędne, które wskazują jego położenie względem początku na osi X i osi Y.

Wybierz element, otwórz panel ustawień, naciskając klawisz Tab, a zobaczysz współrzędne elementu na samej górze panelu.

Domyślny punkt początkowy wszystkich elementów znajduje się w lewym górnym rogu kontenera siatki. Można go jednak przesunąć i umieścić w jednym z dziewięciu punktów prostokąta: w prawym, górnym, dolnym lewym itd.

Aby zmienić położenie punktu początkowego, otwórz panel +Container (domyślnie jest on zminimalizowany).

Przewidzieliśmy, że rozmiar elementów można również ustawić w procentach. Możesz więc tworzyć "płynne" elementy, które zmieniają rozmiar w zależności od okna przeglądarki.

Na przykład, chcesz, aby połowa ekranu była zawsze żółta. Aby to zrobić, dodaj kształt i otwórz panel ustawień elementu. Ustaw typ kontenera na Window Container, zmień jednostki miary szerokości i wysokości na procenty zamiast pikseli, ustaw szerokość ekranu na 50% i wysokość ekranu na 100%. Można również ustawić wartości osi w procentach. Jeśli chcesz, aby element zawsze zajmował prawą połowę ekranu, ustaw wartość osi X na 50%.

Film pokazuje, że prawa strona bloku zawsze zajmuje połowę ekranu.

Domyślnie wszystkie elementy są dołączone do kontenera Grid. Jest to prostokąt o szerokości 1200 pikseli na pulpicie. Jest on zawsze wyśrodkowany na ekranie i ma ten sam rozmiar, niezależnie od szerokości ekranu.

Dzięki funkcji Auto Scale można skalować wszystkie elementy należące do kontenera Grid proporcjonalnie do szerokości ekranu lub przeglądarki. Kontener Grid nie będzie zajmował stałej szerokości 1200 pikseli, ale rozciągnie się do pełnej szerokości ekranu. Wszystkie dodane elementy zostaną proporcjonalnie powiększone i zajmą cały ekran.

Aby włączyć automatyczne skalowanie, otwórz ustawienia obszaru roboczego i znajdź opcję Skaluj kontener siatki. Wybierz opcję Automatyczne skalowanie do szerokości okna i zapisz zmiany.

To ustawienie dostosuje projekt witryny do dowolnej rozdzielczości, w tym ekranów HD. Opcja pomoże uniknąć niepotrzebnego pustego miejsca na ekranach o wysokiej rozdzielczości, a także przyspieszy przepływ pracy projektowej - nie będziesz musiał tracić czasu na adaptacyjny układ.

W razie potrzeby można ustawić automatyczne skalowanie dla wszystkich typów ekranów, np. tylko dla urządzeń mobilnych, ustawiając tylko określony zakres szerokości ekranu. Kontener wersji desktopowej powiększa się z 1200px do 1920, 4K lub nawet 6K. Wersja mobilna powiększa się z 320px.

Wysokość bloku będzie dynamiczna: zmieni się proporcjonalnie do szerokości podczas skalowania bloku.

Przyciski: Aby utrzymać przycisk w żądanej odległości od granic okna przeglądarki, ale nie skalować go w różnych rozdzielczościach, ustaw dla niego współrzędne w kontenerze okna. Użyj powiązania z różnymi kontenerami, aby skalować niektóre elementy w tym samym bloku i pozostawić niektóre elementy w stałej odległości od krawędzi przeglądarki, ale bez zmiany rozmiaru.

Obrazy: Zachowaj ostrożność podczas przesyłania obrazów: powinny one mieć odpowiedni rozmiar, aby nie straciły jakości podczas skalowania do większych ekranów.

Używaj obrazów wektorowych w formacie .svg dla ikon i ładuj obrazy tła i zdjęcia z rezerwą. Gdy przesyłasz duży obraz, jego szerokość jest domyślnie zmieniana na 1680 pikseli, ale jeśli klikniesz ikonę koła zębatego podczas przesyłania, otrzymasz opcję przesłania obrazu o rozmiarze 1920 pikseli. Przełącz przełącznik "Zezwalaj na przesyłanie do 1920 pikseli" i prześlij pliki. Obrazy większe niż 1920 pikseli nie mogą być przesyłane, ponieważ taki rozmiar wpłynie na wydajność przeglądarki i szybkość ładowania strony.

Spróbujmy stworzyć okładkę z następującymi cechami:

- Obraz tła zajmuje cały ekran.
- Nagłówek, podnagłówek i przycisk są zawsze wyśrodkowane.
- Strzałka w dół jest na stałe umieszczona na dole ekranu.

Spójrzmy na to, co mamy: obraz tła zajmuje cały ekran; nagłówek, tekst i przycisk są wyśrodkowane; strzałka znajduje się na dole.