Kolejnym czynnikiem skłaniającym do skupienia się na projektowaniu responsywnym dostosowanym przede wszystkim do urządzeń mobilnych jest fakt, że większość ludzi korzysta z Internetu za pośrednictwem urządzeń mobilnych (60%). Podczas gdy tylko 20% ludzi korzysta z Internetu na komputerach stacjonarnych.
W tym artykule opisano instrukcje tworzenia responsywnego projektu dostosowanego do urządzeń mobilnych.
Jak skonfigurować responsywny projekt dostosowany do urządzeń mobilnych?
Responsywny projekt, niezależnie od tego, czy jest dostosowany do urządzeń mobilnych, czy przeznaczony dla większych ekranów, można utworzyć, postępując zgodnie z metodami podanymi poniżej:
- Utwórz responsywny projekt dostosowany do urządzeń mobilnych.
- Użyj/wykorzystaj zapytanie o media, aby opracować/utworzyć responsywny projekt dla większych ekranów.
Metoda 1: Utwórz projekt dostosowany do urządzeń mobilnych
Najpierw zacznij od stworzenia podejścia projektowego opartego na urządzeniach mobilnych. W tym celu wykonaj poniższe instrukcje krok po kroku.
Krok 1: Utwórz strukturę HTML
Najpierw utwórz strukturę HTML i dodaj „ Bootstrap ' w
< ul >
< To >< A href = „#” > Dom < / A >< / To >
< To >< A href = „#” > O nas < / A >< / To >
< To >< A href = „#” > Nasze Usługi < / A >< / To >
< To >< A href = „#” > Skontaktuj się z nami < / A >< / To >
< / ul >
< / nie>
< / nagłówek>
< h1 > Witamy w Linuxowej podpowiedzi < / h1 >
< P > Strona z tutorialami. < / P >
< / sekcja>
< / główne>
< P > Wskazówki dotyczące Linuksa Prawa autorskie < / P >
< / stopka>
< / ciało >
Krok 2: Zastosuj CSS
W sekcji treści ustaw opcję „ rodzina czcionek ' Do ' bezszeryfowy ”. Ustaw także dopełnienie, margines i kolor tła. Następnie zastosuj CSS w nagłówku, stopce i nawigacji:
ciało {rodzina czcionek : bezszeryfowy ;
margines : 0 ;
wyściółka : 0 ;
kolor tła : #808080 ;
}
nagłówek {
kolor tła : fioletowy ;
kolor : biały ;
wyściółka : 8 pikseli ;
}
nawigacyjna ul {
typ-stylu listy : nic ;
wyściółka : 0 ;
margines : 0 ;
}
ich statek {
margines : 4 piks 0 ;
}
nav ul li a {
kolor : biały ;
dekoracja tekstowa : nic ;
}
główny {
wyściółka : 18 pikseli ;
}
stopka {
kolor tła : różowy ;
kolor : biały ;
wyrównanie tekstu : Centrum ;
wyściółka : 8 pikseli ;
}
Jak można zauważyć, poniższe wyniki potwierdziły, że projekt jest dostosowany do urządzeń mobilnych:
Metoda 2: Użyj zapytań o media, aby utworzyć responsywny projekt dla większych ekranów
Powyższy projekt można stworzyć również z myślą o większych ekranach takich jak tablety i komputery stacjonarne. W tym celu użytkownicy muszą uwzględnić zapytanie o media w CSS. Szerokość dla tabletów wynosi „ 786 pikseli ”, a dla komputerów stacjonarnych to „ 1024 piks ”.
Aby zastosować zapytania o media, najpierw dołącz „ @głoska bezdźwięczna ” w pliku CSS. Następnie określ właściwość „min-width” jako „ 768 pikseli ”. Oznacza to, że zawsze, gdy zostanie osiągnięty minimalny rozmiar ekranu „768 pikseli” lub większy, zastosowany zostanie następujący CSS:
@głoska bezdźwięczna ( minimalna szerokość : 768 pikseli ) {ciało {
rozmiar czcionki : 14 pikseli ;
}
nagłówek {
wyściółka : 18 pikseli ;
}
nawigacyjna ul {
wyświetlacz : przewód ;
}
ich statek {
margines : 0 8 pikseli ;
}
główny {
wyświetlacz : przewód ;
uzasadnij-treść : przestrzeń pomiędzy ;
wyrównaj-przedmioty : Centrum ;
}
stopka {
wyściółka : 18 pikseli ;
}
}
Poniższe dane wyjściowe pokazały, że projekt reaguje również na większych ekranach:
Wniosek
Aby skonfigurować responsywny projekt dostosowany do urządzeń mobilnych, najpierw utwórz strukturę HTML i dodaj rzutnię. Następnie połącz plik CSS w tagu head. Następnie zastosuj CSS w oparciu o responsywny projekt dostosowany do urządzeń mobilnych. Ponadto użytkownicy mogą dodać zapytanie o media CSS, aby dostosować je na urządzeniu mobilnym. W tym artykule przedstawiono szczegółową procedurę tworzenia responsywnego projektu dostosowanego do urządzeń mobilnych.