Adaptacyjny układ strony: instrukcje krok po kroku z przykładami

Układ jest tworzeniem struktury i projektowania elementów strony internetowej. Pisanie kodu strony internetowej to projektant layoutu lub front-end developer. Używa programu graficznego do cięcia układów, edytora kodu, dodatkowych programów do przyspieszenia procesu.

Jaki jest układ

Kod układu jest szkieletem strony witryny, napisanej w html języka znaczników. Składa się z logicznie podzielonych na części strony - znaczników. Każdy z nich odpowiada za swój obszar: menu, stopkę, media, formularze, mapy, wyszukiwanie w witrynie, czas. Mają atrybuty, z ich pomocą identyfikuje się poszczególne elementy. Kaskadowe arkusze stylów są odpowiedzialne za projekt, a javascript za dynamiczne efekty.

Układ jakościowy jest równie wyświetlany we wszystkich przeglądarkach. Wynik ustala się, przeprowadzając serię testów. Możliwość pracy na więcej niż jednej platformie sprzętowej nazywa się międzyplatformową. Istnieje kilka podejść do implementacji układu, używając różnych frameworków.

Aby tworzyć strony według nowoczesnych standardów, stosowane są różne metody adaptacyjnego układu. Zapewnia to prawidłowe wyświetlanie elementów na wszystkich typach ekranów.

Rodzaje układów

Standardy są stale ulepszane, w wyniku czego zmieniają się sposoby tworzenia układów. Obecnie istnieją 3 główne typy stron:

• statyczne;
• guma;
• adaptacyjny.

Układy statyczne to strony, które nie są w stanie zmienić ich projektu. Ich konstrukcja nie zmienia się, a wymiary elementów mają wyraźne znaczenie.

Układ adaptacyjny oznacza, że ​​elementy witryny dostosują się do rozmiaru ekranu używanego urządzenia. Gdy zmienia się szerokość dokumentu, bloki są przebudowywane, niektóre części zastępowane są innymi, niektóre elementy znikają. Idea adaptowalności zastąpiła wersje mobilne witryny, żyjące w oddzielnych subdomenach. Główną zasadą tworzenia zdolności adaptacyjnych jest opracowanie projektu dla trzech ekranów: komputera, tabletu, smartfona.

Podczas tworzenia układu gumowego uwzględnia się także zmianę rozmiaru ekranu i regulację wszystkich elementów. Główną różnicą w stosunku do adaptacji jest to, że układ rozszerza się lub kurczy pod ekranem w każdej chwili zmiany.

Sprawdź, której z poniższych zasad używasz. Jeśli podczas rozciągania okna przeglądarki strona jest rozciągnięta wraz z nim, to jest to układ gumowy. Kiedy strona witryny zmienia się tylko w kilku pozycjach, oznacza to, że jest adaptacyjna.

Rozmiary adaptacyjnego układu

Aby utworzyć układy adaptacyjne, używane są względne jednostki miary zamiast standardowego static px. Najczęściej:

• em;
• rem;
• %

W adaptacyjnym układzie na html, em służy do ustawiania rozmiaru czcionki i wcięcia. Domyślnie 1 em to 16 pikseli. W związku z tym, aby ustawić czcionkę dla akapitu p o rozmiarze 32 pikseli, należy określić:

p {

rozmiar czcionki: 2em;

}

Osobliwością jednostki jest to, że 1em jest równy rozmiarowi czcionki jej elementu. Oznacza to, że 1em przyjmuje różne wartości w różnych częściach kodu. Na przykład w bloku, w którym rozmiar czcionki wynosi 2em (32 piksele), margines w 1em będzie wynosił 32 piksele. Ale w przypadku czcionki 1em (16 pikseli) dopełnienie w 1em będzie równe standardowym 16 pikselom.

Rem - root em, który jest zdefiniowany w tagu . 1 root-em, w przeciwieństwie do 1em, jest równy jednej liczbie w każdych okolicznościach. Wartość zmienia się tylko wtedy, gdy zmiany są wymuszone.

Wartości procentowe są zwykle używane do ustawiania szerokości bloków lub obrazów. Bez względu na rozmiar ekranu, będzie on odpowiadał określonej wartości, na przykład 80%.

Zapytania o media

CSS zawiera obsługę różnych parametrów urządzeń technicznych. Zostanie określony smartfon z niewielkim rozszerzeniem ekranu, właściwość stylu zostanie wyświetlona pod jego wartością. Zapytania o media ujawniają różnice orientacji: portret i krajobraz. Szeroko stosowany do tworzenia układu adaptacyjnego. Układ do dostosowania do podanego rozdzielczość ekranu struktura dokumentu zmienia się zgodnie z kodem.

Określone typy urządzeń:

• urządzenia brajlowskie i drukarki wytłaczane dla osób niewidomych;
• drukowanie konwencjonalnych drukarek;
• ekran monitora ekranowego;
• mowa syntezatorów mowy;
• telewizor tv.

W wartości nazwy żądania istnieje kilka warunków. Na przykład wyświetl zawartość tylko dla ekranów monitora i tylko o maksymalnej szerokości 600 pikseli. Wygląda to tak:

@media ekran i (maksymalna szerokość: 600px) {kod wyjściowy}.

Projektowanie adaptacyjne opiera się na wykorzystaniu zapytań o media. Tworzy układ ekranów o minimalnej szerokości 1200 pikseli, treść kodu jest umieszczana na ekranie @media i (maksymalna szerokość: 1200px) {}. Następnie tworzony jest blok dla ekranu @media i (min-width: 700px) tabletów {} i @media oraz (maksymalna szerokość: 699px) {} urządzeń mobilnych.

Najpierw mobilna

Zgodnie z najnowszymi wskaźnikami, z urządzeń mobilnych i tabletów do Internetu pochodzą znacznie częściej niż z komputerów. W związku z tym ruch mobilny staje się bardziej znaczący dla stron internetowych. Ze względu na takie funkcje, jak mały rozmiar ekranu, użytkownicy gadżetów wolą witryny z pierwszych wierszy wyników wyszukiwania, poświęcają mniej czasu na wyszukiwanie informacji.

Podejście Mobile First polega na wyświetlaniu najważniejszych treści, łatwej i zoptymalizowanej stronie internetowej, odmawiając pobierania innych zasobów.

Adaptacyjny układ witryny zgodnie z tą metodologią przewiduje wstępne utworzenie strony dla małych ekranów i kolejne dodanie elementów wymaganych przez projekt strony dla dużego monitora. Pomimo przejrzystości podejścia, klienci i realizatorzy dokładają wszelkich starań, aby całkowicie zmienić zwyczajową metodę rozwoju strony.

Bootstrap

Jedną z popularnych frameworków, które dały prostą odpowiedź na pytanie, jak wprowadzić adaptacyjny układ, jest Twitter Bootstrap. Za pomocą 12-kolumnowej siatki początkowej tworzone są strony internetowe, które są domyślnie wyświetlane domyślnie poprawnie na ekranach urządzeń mobilnych. Główne używane narzędzia to:

• wcześniej określona szerokość kolumn, która może określać szerokość elementów;
• stałe i gumowe elementy dokumentu;
• osadzone czcionki i klasy dla nich;
• środki projektowania tabel;
• klasy projektowe na pasku narzędzi menu.

Efekty dynamiczne są pisane w jQuery, do opisu wyglądu używany jest preprocesor SASS SASS, a popularne funkcje czcionek internetowych są wbudowane w tę funkcjonalność. Strony opracowane na najnowszej wersji programu ładującego nie są wyświetlane poprawnie w rzadko używanych wersjach przeglądarek, takich jak IE8, IE9 i iOS 6. Warto zauważyć, że root em jest używany jako rozmiary czcionek dla niektórych elementów. Oficjalna strona internetowa zawiera szczegółowe instrukcje w języku angielskim i rosyjskim, przykłady adaptacyjnego układu, sposoby korzystania z wbudowanych komponentów.

Fundacja

Foundation to potężna struktura, jeden z głównych konkurentów Twitter Bootstrap. Obsługuje wszystkie rozmiary sieci, ma wiele zalet, których brakuje w Bootstrap.

Komponenty są rozróżniane przez duży zestaw różnych efektów animacji, które można dostosować. Do zarządzania stylami używany jest preprocesor SASS. Lista podstawowych szablonów zawiera suwaki, paski nawigacji, ikony mediów społecznościowych.

Rozmiary są ustalane według wartości podanych w tabeli.

Układ siatki

Innym systemem, który zasługuje na uwagę, jest układ siatki. Jest to zbiór przecinających się linii pionowych i poziomych. Tworzą kolumny i wiersze. Elementy są umieszczane w siatce, ich rozmiary są wyświetlane zgodnie z wierszami i tabelami. Możliwe jest użycie stałych rozmiarów, takich jak px, i elastycznych - procenty, rem i em.

Najpierw należy zadeklarować kontener siatki.

wyświetlacz: siatka

Właściwość grid-template-columns służy do ustawiania szerokości wiersza, a właściwość grid-template-rows służy do tworzenia kolumn. Wymiary można określić w jednej właściwości grid-template-columns. Szerokość pasków jest mierzona w jednostkach fr, które reprezentują ułamek dostępnej przestrzeni w pojemniku. Możliwe jest użycie fx i px w jednej usłudze. Na przykład: kolumny-szablon-kolumny: 500px 1fr 2fr.

Wniosek

Pełna praktyka układu adaptacyjnego od A do Z wymaga użycia maksymalnej liczby metod. Aby dezasemblować od zera, jaki jest układ dla wszystkich urządzeń, należy ręcznie użyć zapytań o media, obliczyć rozmiary obrazów i czcionki. Po uzyskaniu odpowiednich umiejętności możesz zacząć korzystać z frameworków.