W tym poście zostaną zawarte wytyczne niezbędne do wdrożenia zapytań o media.
Jak zaimplementować zapytania o media dla urządzeń mobilnych?
Zapytanie o media można zastosować do urządzeń mobilnych, po prostu wspominając „ @głoska bezdźwięczna ” i określenie rozmiaru ekranu w małych nawiasach klamrowych. Następnie można dodać kod CSS tego zapytania o media w nawiasach klamrowych. Ilekroć rozmiar ekranu odpowiada rozmiarowi określonemu przez użytkownika, zastosowane zostanie określone zapytanie o media.
Przyjrzyjmy się praktycznemu przykładowi, aby poznać implementację zapytań o media na urządzeniach mobilnych.
Przykład: utwórz układ, który zmienia się z układu dwóch kolumn na układ jednej kolumny, stosując zapytania o media
W poniższym przykładzie układ strony internetowej zostanie zmieniony z układu kolumnowego na układ jednokolumnowy:
Krok 1: Utwórz strukturę HTML
- Najpierw utwórz plik HTML i połącz w nim zewnętrzny plik arkusza stylów CSS
Sekcja. - Następnie utwórz plik
sekcję i dodaj nagłówek witryny za pomocą etykietka. - Stwórz pod nazwą klasy „container-class”, a dwa kolejnew środku mają nazwę klasy „ kolumna ”. < ciało >
< h1 > Wskazówka dotycząca Linuksa < / h1 >
< / nagłówek>
< div klasa = „klasa kontenerowa” >
< div klasa = 'kolumna' >
< h2 > Sekcja pierwsza < / h2 >
< P > Linux Hint to jedna z najlepszych platform e-learningowych. < / P >
< / div >
< div klasa = 'kolumna' >
< h2 > Sekcja druga < / h2 >
< P > Linux Hint to jedna z najlepszych platform e-learningowych. < / P >
< / div >
< / div >
< / ciało >Krok 2: Zastosuj CSS
W części ciała:- Najpierw określ sekcję treści, wpisując „ ciało ” i wspomnienie o nawiasach klamrowych.
- Wewnątrz nawiasów klamrowych określ rodzinę czcionek, kolor tła, margines i wypełnienie.
Na
Sekcja:
- Określ kolor tekstu, wyrównanie tekstu, kolor tła i dopełnienie.
Na „klasa kontenerowa” dział:
- Ustaw ' wyświetlacz ”wartość właściwości do” przewód ”, aby utworzyć Flexbox.
- Użyj ' uzasadnij-treść ”, aby dodać odstęp między treścią i dodać dopełnienie.
W klasie kolumnowej:
- Najpierw określ podaną wartość w polu „ przewód ”, aby dodać spację pomiędzy dwiema sekcjami układu.
- Następnie dodaj kolor tła, obramowanie, dopełnienie i rozmiar pudełka.
Krok 3: Zastosuj zapytanie o media
- Aby zastosować zapytanie o media dla urządzeń mobilnych, najpierw dodaj „ @głoska bezdźwięczna ”znacznik.
- Następnie określ wartość „ 768 pikseli ”, co jest typowe dla urządzeń mobilnych do „ maksymalna szerokość ”właściwość w małych nawiasach klamrowych.
- Następnie określ „ kolumna ” wartość do „ kierunek flex „właściwość, która będzie miała zastosowanie do „ klasa kontenera”. Spowoduje to zmianę dwóch kolumn w jedną kolumnę po wykryciu określonego rozmiaru ekranu.
- Na koniec zastosuj CSS na „ kolumna ” klasę i określ „ margines ' I ' przewód wartości:
rodzina czcionek: bezszeryfowa;
tło- kolor : srebro;
margines: 0 ;
wyściółka: 0 ;
}
nagłówek {
tło- kolor : #2f4f4f;
dopełnienie: 20px;
tekst- wyrównywać : Centrum;
kolor : biały;
}
.pojemnik- klasa {
wyświetlacz: elastyczny;
uzasadniać- treść : przestrzeń pomiędzy;
dopełnienie: 20px;
}
.kolumna {
przewód: 0 1 oblicz ( pięćdziesiąt % - 10 pikseli ) ;
granica : 1px zielony;
tło- kolor : biały;
rozmiar pudełka: border-box;
dopełnienie: 20px;
}
@ głoska bezdźwięczna ( maks- szerokość : 768 pikseli ) {
.pojemnik- klasa {
kierunek flex: kolumna;
}
.kolumna {
przewód: 0 1 100 %;
margines na dole: 20px;
}
}Wyjście
Oto wynik strony internetowej po zastosowaniu zapytania o media. Dane wyjściowe to responsywny układ składający się z dwóch kolumn:
Ilekroć ekran spełnia określone wymiary przy użyciu zapytania o media dla urządzeń mobilnych, zmienia się w układ jednokolumnowy:
Wniosek
Aby zaimplementować zapytania o media dla urządzeń mobilnych, najpierw dołącz „ rzutnia ' w ' głowa ' Sekcja. Następnie napisz CSS dostosowany do projektu mobilnego. Następnie dodaj zapytanie o media, używając tagu „@media” i określając rozmiar ekranu urządzenia mobilnego. Na przykład określ 768 pikseli dla tabletów i 480 pikseli dla telefonów komórkowych. W tym artykule wyjaśniono procedurę wdrażania zapytań o media dla urządzeń mobilnych.