Zero Block: Responsywny projekt

Zero Block ma dwa obszary robocze, które są nazywane kontenerami. Obszar siatki jest nazywany kontenerem siatki, podczas gdy kontener okien 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ątrz kontenera siatki, będą one znajdować się wewnątrz siatki dwunastokolumnowej, 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ń: kiedy przełączasz się między typami ekranów, szerokość Grid Container wynosi 980, 640, 480, 320px, pozostaje stała i wyśrodkowana.

Możesz ustawić wysokość kontenera siatki w ustawieniach obszaru roboczego lub przeciągając kontener w górę/w dół za pomocą myszy. Możesz ustawić unikalną wysokość kontenera siatki dla każdej rozdzielczości. Wysokość kontenera siatki jest wysokością bloku.

Jeśli chcesz, aby Zero Block zawsze zajmował 100% wysokości ekranu, musisz ustawić wysokość kontenera okna na inną niż wysokość kontenera siatki. Musisz więc ustawić wysokość kontenera okien 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 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 ustawione w lewym górnym rogu na wszystkich ekranach.

W tym celu otwórz panel Ustawienia elementu i zmień typ kontenera na Kontener okien. Początek zostanie przesunięty do lewego górnego rogu kontenera okna.

Teraz logo będzie w lewym górnym rogu dowolnego ekranu.

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

Każdy element w obszarze roboczym ma swoje własne współrzędne wskazujące jego położenie względem początku układu współrzędnych na osiach X i Y.

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

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

Aby zmienić lokalizację punktu początkowego, otwórz panel +Kontener (domyślnie jest zminimalizowany).

Ustaliliśmy, że wielkość elementów będzie również ustalona 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 Ustawienia elementu. Ustaw typ kontenera na Window Container, zmień jednostki miary szerokości i wysokości na procenty zamiast pikseli, ustaw szerokość ekranu na 50%, a wysokość ekranu na 100%. Możesz także ustawić wartości osi w procentach. Jeśli chcesz, aby element zawsze zajmował prawą połowę ekranu, ustaw wartość osi X na 50%.

Na filmie widać, ż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 zawsze wyśrodkowany na ekranie i ma ten sam rozmiar, niezależnie od szerokości wyświetlacza.

Dzięki automatycznemu skalowaniu możesz 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 zostanie rozciągnięty na całą szerokość ekranu. Wszystkie dodane elementy zostaną proporcjonalnie powiększone tak, aby zajmowały cały ekran.

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

To ustawienie dostosuje projekt strony 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 pracę projektową - nie będziesz musiał tracić czasu na układ adaptacyjny.

W razie potrzeby możesz 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ę od 1200px do 1920, 4K lub nawet 6K. Wersja mobilna zwiększa rozmiar z 320px.

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

Przyciski: Aby przycisk znajdował się w żądanej odległości od krawędzi 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.

Obrazów: Zachowaj ostrożność podczas przesyłania obrazów: powinny mieć odpowiedni rozmiar, aby nie traciły jakości po skalowaniu do większych ekranów.

Używaj obrazów wektorowych w .svg formacie 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, pojawi się opcja przesłania obrazu o dużej szerokości 1920 pikseli. Przełącz przełącznik "Zezwalaj na przesyłanie do 1920 pikseli" i prześlij pliki. Nie można przesyłać obrazów większych niż 1920px, ponieważ ten rozmiar wpłynie na wydajność przeglądarki i szybkość ładowania witryny.

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

— Obraz tła zajmuje cały ekran.
— Nagłówek, podtytuł i przycisk są zawsze wyśrodkowane.
— Strzałka w dół jest umieszczona u dołu ekranu.

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