Co to jest zapytanie o media?
zapytanie o media to technika CSS wprowadzone w CSS3.
Używa @media reguły obejmują blok właściwości CSS tylko wtedy, gdy pewien warunek jest spełniony.
Przykład
Jeśli okno przeglądarki jest mniejsza niż 500px, kolor tła zmienia się na jasnoniebieski:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Spróbuj sam " Dodaj punkt przerwania
Wcześniej w tym tutorialu zrobiliśmy stronę internetową z wierszy i kolumn, a to był czuły, ale to nie wygląda dobrze na małym ekranie.
Zapytania o media mogą pomóc. Możemy dodać punkt przerwania, gdzie pewne części projektu będzie zachowywał się inaczej na każdej stronie punktu przerwania.
Pulpit
Telefon
Użyj zapytania mediów, aby dodać punkt przerwania na 768px:
Przykład
Gdy ekran (okno przeglądarki) staje się mniejsza niż 768px, każda kolumna powinna mieć szerokość 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Spróbuj sam " Zawsze design for Mobile First
Komórka pierwsze środki projektowaniem dla urządzeń przenośnych przed zaprojektowaniem dla komputerów i innych urządzeń (Spowoduje to, że wyświetlacz strona szybciej na mniejszych urządzeniach).
Oznacza to, że musimy dokonać pewnych zmian w naszym CSS.
Zamiast zmieniać style gdy szerokość maleje niż 768px, powinniśmy zmienić wygląd gdy szerokość staje się większy niż 768px. Spowoduje to, że nasz projekt przenośnych Pierwszy:
Przykład
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Spróbuj sam " Innym Breakpoint
Można dodać dowolną liczbę punktów przerwań, jak chcesz.
Będziemy również wstawić przerwania między tabletów i telefonów komórkowych.
Pulpit
Tablet
Telefon
Robimy to poprzez dodanie jeszcze jednego zapytania mediów (na 600px), a także zestaw nowych klas dla urządzeń większych niż 600px (ale mniejszy niż 768px):
Przykład
Należy zauważyć, że dwa zestawy klas są prawie identyczne, z tą tylko różnicą jest nazwa ( col- i col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Spróbuj sam " To może wydawać się dziwne, że mamy dwa zestawy identycznych klasach, ale daje nam możliwość w HTML, aby zdecydować, co stanie się z kolumn na każdym przerwania:
Przykład HTML
Na pulpicie:
Pierwszy i trzeci odcinek będzie zarówno rozpiętość 3 kolumny każda. Część środkowa obejmie 6 kolumn.
Dla tabletek:
Pierwszy odcinek będzie obejmować 3 kolumny, drugi obejmie 9, a trzecia część będzie wyświetlona poniżej dwóch pierwszych odcinków i będzie obejmować 12 kolumn:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientacja: pionowy / poziomy
Zapytania nośnik może być także wykorzystywany do zmiany układu strony w zależności od orientacji przeglądarce.
Można mieć zestaw właściwości CSS, które będą miały zastosowanie tylko wtedy, gdy okno przeglądarki jest szerszy niż jego wysokość, tak zwanym "Pejzaż" orientacji:
Przykład
Strona WWW będzie miał jasnoniebieskie tło Jeśli orientacja jest w trybie poziomym:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Spróbuj sam "