✅ Jak stworzyć responsywny układ

Spisie treści

Wymagania
Właściwości minimalna i maksymalna szerokość
Używając Względne dopełnienie

A responsywny układ stał się normą w projektowaniu stron internetowych, ten rodzaj układu strony oznacza, że jeśli okno, które go zawiera, zmienia się gwałtownie, czyli z bardzo dużego na bardzo mały i odwrotnie, nasze elementy muszą mieć możliwość przestawienia się, aby utrzymać przyzwoite i funkcjonalne doświadczenie użytkownika.

To zawsze było dostępne z zasadami CSSJednak w ostatnim wdrożeniu tego samego, podjęto lepsze działania, po części ze względu na istnienie już współczesnego świata mobilnego, który jest jednym z wielkich konsumentów designu czuły.

Chociaż istnieje kilka frameworków, takich jak Bootstrap lub Fundacja które domyślnie dają nam responsywny układ, nie zawsze możemy na nich polegać, dlatego bardzo przydatna jest wiedza, w jaki sposób możemy zbudować układ tych cech własnymi środkami.

Wymagania

1- Aby ukończyć ten samouczek, musimy mieć podstawową wiedzę na temat HTML Tak CSS, ponieważ są one niezbędne do zrozumienia przykładów przedstawionych w samouczku.

2- Od strony technicznej wymagamy przynajmniej nowoczesnej przeglądarki, takiej jak Google Chrome, edytor tekstu do pisania naszego kodu, którego możemy użyć Wzniosły tekst o NotePad ++ lub nawet notatnik Windows lub Gedit na Linuksie, jeśli mamy ochotę na przygodę.

3- Na koniec potrzebujemy połączenia z Internetem, aby pobrać obraz lub dwa, jeśli chcemy umieścić je w naszym kodzie, jak zobaczymy w jednym z pokazanych przykładów.

Właściwości minimalna i maksymalna szerokość

To chyba pierwszy aspekt, z którym spotykamy się podczas pracy ze środowiskami czuły, ponieważ wiele razy koncentrujemy się na tym, kiedy strona się zmniejsza, ale co z nowymi ekranami? 4K? Dlatego nie możemy zaniedbywać maksymalnej rozdzielczości, pod jaką nasza strona internetowa wygląda przyzwoicie.

minimalna i maksymalna szerokośćWłaściwości lub atrybuty minimalna szerokość Tak maksymalna szerokość CSS pomagają nam walczyć z tym problemem, ponieważ pozwalają nam ustalić maksymalne marginesy, poniżej których chcemy, aby nasz projekt był czuły, bo jeśli nie, to skrajności w rozmiarach mogą nam płatać figle, zwłaszcza w tych momentach, w których rozdzielczości nadal rosną, ale jeszcze nie stają się masywne.

W poniższym przykładzie pokażemy, jak możemy regulować nasze układ dzięki wspomnianym właściwościom, w tym celu stworzymy dokument HTML o następującej treści:

Przykład układu responsywnego 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies w quis bólu. Pojazdy Aliquam ac nisl.

To, co zrobiliśmy, to utworzenie trzech elementów div, które działają jako rodzaj kolumn, więc w tym przypadku mówimy do jego elementu kontenera artykuł że jego maksymalna szerokość będzie 1200 pikseliTak więc, bez względu na to, jak duży jest ekran, projekt nigdy nie będzie rósł stamtąd, wtedy tworzymy trzy klasy, po jednej dla każdego div i jednej przypisujemy w ten sposób minimalną szerokość, bez względu na to, jak bardzo ekran jest zmniejszony, to zawsze idzie, aby zachować te minimalne proporcje, jest to doskonałe do zdjęć, jak zobaczymy na zrzucie ekranu przykładu, a na koniec do klasy Platforma przypisujemy mu również minimalną szerokość. Zobaczmy jak wygląda nasz przykład w przeglądarce, gdy mamy dużą rozdzielczość:

POWIĘKSZAĆ

Zobaczmy teraz, jak skaluje się, gdy nieco zmniejszymy okno przeglądarki:

POWIĘKSZAĆ

Na koniec zobaczmy wynik, gdy sprawimy, że okno będzie miało rozmiar podobny do telefonu komórkowego:

Mogliśmy zobaczyć, jak zachowane zostały ustalone proporcje minimum i maksimum, ale najważniejsze jest to, że nasz projekt był dostosowany do różnych rozdzielczości, z jakimi go wizualizowaliśmy i w ten sposób byliśmy w stanie zapewnić, że użytkownik nie przegrał. użyteczność w ich doświadczeniu z naszą witryną.

Oczywiście nie jest to coś, co można pokazać na produkcji, ale daje nam wyobrażenie, na czym powinniśmy skupić część wysiłków, gdy pracujemy nad prawdziwymi projektami naszych aplikacji i stron, ciekawe jest to, że kolumny zostały dostosowane tak, abyśmy mogli zobaczyć, jak przeszliśmy z układu 3-kolumnowego do układu jednokolumnowego.

Używając Względne dopełnienie

ten wyściółka Jest to miara, która pozwala nam na zachowanie przestrzeni zawartości względem krawędzi pojemnika, dzięki czemu ustalimy granicę tego, jak daleko zajdzie, nie należy jej mylić z marginesem, bo to już inna koncepcja.

Chodzi o to, że wyściółka prawie nigdy nie jest brane pod uwagę przy układ być czuły w wyniku czego teksty i treści pozostają nieestetyczne przy zmianie rozdzielczości, z jaką oglądany jest projekt.

W poniższym kodzie będziemy umieszczać a wyściółka który działa względnie, to znaczy, gdy rozmiar okna jest dopasowany, nasz wyściółka Zmieni się, aby zachować proporcje, dzięki czemu treść zawsze pozostanie taka, jak ją ułożyliśmy, mimo że ma mniej miejsca ze względu na zmianę rozdzielczości. Zobaczmy nasz przykład kodu:

Względne dopełnienieZachowaj proporcje dzięki względnej wyściółce

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Jak widzimy, definiujemy właściwości wyściółka każdej klasy wartościami procentowymi zamiast stałych wartości z pomiarami w pikselach, w ten sposób interpreter stylu przeglądarki poda pomiar zgodny z umieszczoną przez nas wartością, na końcu gdy zobaczymy nasz przykład w przeglądarce otrzymujemy:

POWIĘKSZAĆ

Teraz, jeśli zmniejszymy rozmiar okna, zobaczymy, jak dokonuje się korekta, ale zachowując proporcjonalną odległość od tekstu do krawędzi:

Następnie zauważamy, w jaki sposób nasz projekt jest utrzymywany i zapobiega deformacji poprzez zmniejszenie rozdzielczości osoby, która go zawiera, zapewniając w ten sposób spójne wrażenia dla naszego użytkownika.

Chociaż istnieją bardziej zaawansowane koncepcje, które poruszymy w innych samouczkach, dzięki tym kilku sztuczkom lub wskazówkom możemy tchnąć nowe życie w nasze stare witryny io wiele więcej niż takie wyszukiwarki Google Proszą nas o wersję mobilną, aby móc podać nam preferencje w wynikach. Najważniejszą rzeczą, aby osiągnąć świetne wyniki, jest dużo eksperymentować i dużo ćwiczyć, aby te rozwiązania wychodziły naturalnie z naszego umysłu i nie musiały cały czas uciekać się do przewodników.

Na tym kończymy ten samouczek, ponieważ widzimy, że nie potrzebujemy żadnych ram, aby osiągnąć wyniki czuły, a my też nie musimy zostawiać kombinacji HTML + CSSJedyną rzeczą jest to, że jeśli musimy budować własne narzędzia, to jednak satysfakcja z ulepszania naszego projektu jest wielką nagrodą.