Ce este o interogare Media?
Media de interogare este o tehnică CSS introdus în CSS3.
Acesta utilizează @media regula pentru a include un bloc de proprietăți CSS numai în cazul în care o anumită condiție este adevărată.
Exemplu
Dacă fereastra browser-ului este mai mică decât 500px, culoarea de fundal se va schimba în lightblue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Încearcă - l singur » Adăugați un punct de întrerupere
Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane, și a fost receptiv, dar nu arata bine pe un ecran mic.
interogări media pot ajuta cu asta. Putem adăuga un punct de întrerupere în cazul în care anumite părți ale desenului sau modelului se va comporta diferit pe fiecare parte a breakpoint.
Spațiul de lucru
Telefon
Utilizați o interogare media pentru a adăuga un punct de control la 768px:
Exemplu
Când ecranul (browser window) - (browser window) devine mai mică decât 768px, fiecare coloană trebuie să aibă o lățime de 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%;
}
}
Încearcă - l singur » Proiectarea întotdeauna pentru mobil Primul
Mobile primul mijloc de proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (This will make the page display faster on smaller devices) a (This will make the page display faster on smaller devices) .
Acest lucru înseamnă că trebuie să facă unele schimbări în CSS nostru.
In loc de a schimba stiluri , atunci când lățimea devine mai mică decât 768px, ar trebui să se schimbe designul atunci când lățimea devine mai mare decât 768px. Acest lucru va face design-ul nostru mobil Primul:
Exemplu
/* 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%;}
}
Încearcă - l singur » O altă Breakpoint
Puteți adăuga mai multe puncte de întrerupere doriți.
Vom introduce, de asemenea, un punct de întrerupere între tablete și telefoane mobile.
Spațiul de lucru
Comprimat
Telefon
Facem acest lucru prin adăugarea de mai mult de o interogare de mass - media (at 600px) , precum și un set de noi clase de dispozitive mai mari decât 600px (but smaller than 768px) :
Exemplu
Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este numele ( col- and 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%;}
} Încearcă - l singur » S - ar putea părea ciudat că avem două seturi de clase identice, dar ne dă posibilitatea în HTML, pentru a decide ce se va întâmpla cu coloanele de la fiecare punct de întrerupere:
HTML Exemplu
Pentru desktop:
Prima și a treia secțiune, atât se va întinde pe 3 coloane fiecare. Secțiunea de mijloc se va întinde pe 6 coloane.
Pentru tablete:
Prima secțiune se va întinde pe 3 coloane, al doilea se va întinde 9, iar secțiunea a treia va fi afișat sub primele două secțiuni, și se va întinde pe 12 coloane:
<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>Orientare: Portret / Peisaj
interogări media pot fi, de asemenea, folosit pentru a schimba aspectul unei pagini, în funcție de orientarea browser-ului.
Puteți avea un set de proprietăți CSS care se va aplica numai atunci când fereastra browser - ului este mai mare decât înălțimea sa, o așa numită "Landscape" Orientare:
Exemplu
Pagina web va avea un fundal lightblue în cazul în care orientarea este în modul peisaj:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Încearcă - l singur »