Termin responsywny projektowanie stron internetowych odpowiada strategii tworzenia zachowania witryny w zależności od urządzenia, na którym jest wyświetlana. Na przykład możesz sprawić, że strona internetowa zmieniła jej zachowanie według szerokości ekranu, rozdzielczości, orientacji itp. Responsywny projekt strony internetowej sprawia, że ​​witryna dynamiczna.

Jeśli sprawisz, że Twoja witryna reaguje, nie ma potrzeby rozwijania tej samej witryny w kółko dla każdego nowego urządzenia, które pojawia się na rynku. Witryna automatycznie zmieniłaby swoje zachowanie w oparciu o pragnienie użytkownika. Ta reaktywność sprawi, że witryna zmieni wygląd, gdy użytkownik przełączy się z korzystania z Witryny na komputerze stacjonarnym na telefon komórkowy.

Teraz wiemy, czym jest responsywna strona internetowa, kolejnym wielkim pytaniem jest, jak ją wygenerować. Rozważ następną sekcję, aby zbadać odpowiedź na to pytanie.

Jak sprawić, by projekt internetowy reagował

Reagowanie na stronę internetową obejmuje elastyczność twoich elementów, takich jak tekst, obrazy itp. Poniżej pokazaliśmy różne podmioty, które sprawiają, że Twoja strona internetowa jest reagowana.

1. Rzutnia

Pierwszą i najważniejszą rzeczą, którą powinieneś dołączyć w pliku kodu źródłowego, aby Twoja strona internetowa reagowała.

W tym znaczniku szerokość jest ustawiona na szerokość urządzenia, co oznacza, że ​​szerokość strony internetowej zmieni się w korespondencji do szerokości urządzenia, podczas gdy skala początkowa jest ustawiona na 1, co oznacza, że ​​strona internetowa jest ładowana przez przeglądarkę Po raz pierwszy poziom powiększenia wyniesie 1. Ten znacznik zasadniczo poleca przeglądarkę do dostosowania pomiarów strony internetowej zgodnie z różnymi sytuacjami.

2. Zapytania medialne

Zapytania o media CSS pozwalają zmienić wygląd struktury internetowej w zależności od rodzaju urządzenia wyświetlającego stronę internetową, takiego jak komputery stacjonarne, telefony, laptopy itp. Ponadto można je wykorzystać do oceny takich rzeczy, jak wysokość i szerokość urządzenia i rzutnia, orientacja urządzenia lub rozdzielczość ekranu.

Te zapytania wykorzystują pewne punkty przerwania, które są określane jako punkty, na których zmienia się układ strony internetowej odpowiadający rozmiarowi ekranu typu urządzenia.

Składnia

@media nie | Tylko typ multimediów i (funkcja mediów i | lub | nie funkcja multimedialna)

//Kod;

Wyjaśnione słowa kluczowe

• nie: Odwraca semantykę zapytania medialnego.
• tylko: Zapobiega wdrażaniu starych wersji przeglądarki.
• I: Łączy typ mediów z pewną funkcją mediów.

Teraz zbadajmy przykład tego, w jaki sposób sprawisz, że Twoja strona reaguje za pomocą zapytań multimedialnych.

Przykład
Poniżej demonstrujemy zapytanie medialne.

Html

Witaj świecie!

Tutaj zdefiniowaliśmy

element i umieścił w nim trochę tekstu.

CSS

H1
Font-family: „Times New Roman”, Times, Serif;

@Media ekran i (min-szerokość: 720px)
H1
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

W powyższym kodzie początkowa rodzina czcionki akapitu jest ustawiona na czas Nowy Roman, podczas gdy po zastosowaniu zapytania multimediów, w którym określiliśmy, że jeśli minimalna szerokość ekranu wynosi 720px lub szersza, wówczas rodzina czcionki akapitu będzie Zmień na Verdana. Zmień rozmiar okna przeglądarki, aby zobaczyć efekt zapytania multimedialnego.

Wyjście
Gdy najmniejsza szerokość ekranu wynosi 720px lub szersza.

Gdy minimalna szerokość ekranu jest mniejsza niż 720px.

Zapytanie medialne działa poprawnie.

3. Flexbox

CSS Flexbox to model układu, który umożliwia wydajne i dynamiczne układ elementów. Ten układ jest jednowymiarowy, który umożliwia umieszczenie elementów wewnątrz pojemnika z równie rozłożoną przestrzenią. Ten układ sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie według rodzaju wyświetlania ich urządzenia. Sprawia, że ​​elementy są elastyczne i zapewnia im odpowiednią pozycję i symetrię.

Flexbox składa się z następujących komponentów; A Flex pojemnik i a Element Flex. Flex pojemnik określa właściwości elementu przodka, ustawiając jego wyświetlacz na flex lub flex. Tymczasem element Flex opisuje właściwości elementów następcy i w pojemniku Flex może występować wiele elementów.

Ponadto istnieje wiele właściwości powiązanych z Flexbox, które pomagają w reakcji projektowania stron internetowych. Tutaj pokażemy Ci, w jaki sposób możesz użyć Flexbox, aby Twoja witryna była reaktywna.

Przykład
W poniższym przykładzie pokazaliśmy, jak wygenerować responsywną siatkę obrazu za pomocą Flexbox.

Html

Aby zrobić siatkę obrazową, tworzymy większy element div i gniazdujemy dwa elementy DIV w tym większym DIV. Oba zagnieżdżone elementy div kolejne gniazdują z trzech obrazów.

CSS

.pojemnik
Wyświetlacz: Flex;
Flex-Wrap: Wrap;
Wyściółka: 5px;

Div z klasą „kontener” jest wyświetlany jako Flexbox i otrzymał pewne wyściółki. Ponadto właściwość Flex-Wrap przypisuje się wartość opakowania, co oznacza, że ​​w razie potrzeby obrazy zostaną owinięte wewnątrz pojemnika.

CSS

.kolumny IMG
szerokość: 100%;

.kolumny
Flex: 50%;
maksymalna szerokość: 50%;
Wyściółka: 5px;

Obrazy podano 100% szerokości, aby odpowiednio pasowały do ​​pojemnika, a ponadto za pomocą elastycznej i maksymalnej szerokości tworzymy dwie kolumny, które zostaną umieszczone obok siebie.

CSS

@Media (maksymalny szerokość: 600px)
.kolumny
Flex: 100%;
maksymalna szerokość: 100%;

Wraz z FlexBox używamy również zapytania multimedialnego. Powyższe zapytanie multimediów określa, że ​​jeśli szerokość jest mniejsza niż określona, ​​to dwie kolumny zostanie przekonwertowane na jeden.

Wyjście
Skaluj okno przeglądarki w górę i w dół, aby zobaczyć efekt.

Utworzono responsywną siatkę obrazu.

4. Bootstrap

Jest to ramy CSS, które pozwala użytkownikom tworzyć witryny, które mają charakter responsywny i ze podejściem mobilnym. Takie podejście określa, że ​​projekt internetowy jest najpierw opracowywany dla telefonów komórkowych, a później dla innych urządzeń. Tutaj zademonstrujemy, jak stworzyć pasek nawigacyjny, który ma charakter responsywny przy użyciu bootstrap.

Przykład
Korzystamy z najnowszej wersji Bootstrap, czyli Bootstrap 5, aby stworzyć pasek nawigacyjny.

Html

Po pierwsze, aby wykorzystać Bootstrap 5, obejmuje CDN dla CSS i JavaScript w pliku HTML, tak jak pokazaliśmy powyżej.

Html

W powyższym kodzie stworzyliśmy pasek nawigacyjny za pomocą różnych klas Bootstrap 5. .Navbar klasa służy do owinięcia paska nawigacyjnego wraz z .Navbar-Expand-SM zajęcia responsywnego upadania. Tymczasem .BG-SUCCCESS I .Navbar-Dark to różne schematy kolorów dostarczone dla paska nawigacyjnego.

.pojemnik Klasa obejmuje wszystkie elementy paska nawigacyjnego z szerokością stałą. Tymczasem .Navbar-Nav Klasa jest używana Utwórz pasek nawigacyjny, który ma maksymalną wysokość i jest lekka, a także obsługuje rozwijane rozwijane.

.Nav-Item, I .Nav-Link są używane do tworzenia różnych elementów listy na pasku nawigacji i .aktywny klasa jest aktywna.

Wyjście

Z powodzeniem wygenerowano responsywne pasek nawigacyjny.

Wniosek

Responsywne projektowanie stron internetowych odpowiada strategii tworzenia witryny zmienił jej zachowanie w zależności od urządzenia, na którym jest wyświetlane. Jeśli sprawisz, że Twoja witryna reaguje, nie ma potrzeby rozwijania tej samej witryny w kółko dla każdego nowego urządzenia, które pojawia się na rynku. Taką witrynę można opracować przy użyciu różnych podmiotów, takich jak w tym responsywny meta tag w pliku, przy użyciu zapytań multimedialnych, FlexBox lub bootstrap. Tutaj, w tym artykule, pokazaliśmy różne techniki, z którymi możesz sprawić, by Twoja witryna była reagowana.