Exemplu
Schimbarea culoare de fundal în cazul în care portul de vizualizare este de 480 de pixeli sau mai mare:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Regula @media este folosit pentru a defini reguli de stil diferite pentru mass-media diferite tipuri / dispozitive.
In CSS2 acest lucru a fost numit tipuri de media, în timp ce în CSS3 este numit interogări media.
interogările media uita-te la capacitatea dispozitivului, și poate fi folosit pentru a verifica mai multe lucruri, cum ar fi:
- lățimea și înălțimea imaginii curente
- lățimea și înălțimea dispozitivului
- Orientarea (is the tablet/phone in landscape or portrait mode?)
- rezoluţie
- și mult mai mult
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin regula @media.
| Proprietate | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4 | 9 |
CSS Sintaxa
@media not|only Puteți avea , de asemenea , diferite stylesheets pentru diferite medii:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css "> Tipuri de media
Valoare Descriere all Folosit pentru toate dispozitivele de tip mass-media aural Depreciată. Folosit pentru vorbire și sintetizatoare de sunet braille Depreciată. Folosit pentru dispozitive braille feedback tactil embossed Depreciată. Folosit pentru imprimante braille paginate handheld Depreciată. Folosit pentru dispozitive mici sau portabile print Folosit pentru imprimante projection Depreciată. Folosit pentru prezentari proiectate, cum ar fi slide-uri screen Folosit pentru ecrane, tablete, smart-phone-uri etc. speech Folosit pentru că cititoarele de ecran "reads" pagina cu voce tare tty Depreciată. Folosit pentru mass-media, folosind o grilă de caractere cu pas fix, cum ar fi terminale și-terminale tv Depreciată. Folosit pentru dispozitive de tip televiziune
Caracteristici media
Valoare Descriere aspect-ratio Raportul dintre lățimea și înălțimea portului de vizualizare color Numărul de biți per componentă de culoare pentru dispozitivul de ieșire color-index Numărul de culori a dispozitivului poate afișa device-aspect-ratio Raportul dintre lățimea și înălțimea dispozitivului device-height Înălțimea dispozitivului, cum ar fi un ecran de computer device-width Lățimea dispozitivului, cum ar fi un ecran de computer grid Dacă dispozitivul este o grilă sau bitmap height Înălțimea viewport max-aspect-ratio Raportul maxim dintre lățimea și înălțimea zonei de afișare max-color Numărul maxim de biți per componentă de culoare pentru dispozitivul de ieșire max-color-index Numărul maxim de culori a dispozitivului poate afișa max-device-aspect-ratio Raportul maxim dintre lățimea și înălțimea dispozitivului max-device-height Înălțimea maximă a dispozitivului, cum ar fi un ecran de computer max-device-width Lățimea maximă a dispozitivului, cum ar fi un ecran de computer max-height Înălțimea maximă a zonei de afișare, cum ar fi o fereastră de browser max-monochrome Numărul maxim de biți per "color" pe un monocrom (greyscale) dispozitiv max-resolution Rezoluția maximă a dispozitivului, folosind dpi sau DPCM max-width Lățimea maximă a zonei de afișare, cum ar fi o fereastră de browser min-aspect-ratio Raportul minim între lățimea și înălțimea zonei de afișare min-color Numărul minim de biți per componentă de culoare pentru dispozitivul de ieșire min-color-index Numărul minim de culori a dispozitivului poate afișa min-device-aspect-ratio Raportul minim între lățimea și înălțimea dispozitivului min-device-width Lățimea minimă a dispozitivului, cum ar fi un ecran de computer min-device-height Înălțimea minimă a dispozitivului, cum ar fi un ecran de computer min-height Înălțimea minimă a zonei de afișare, cum ar fi o fereastră de browser min-monochrome Numărul minim de biți per "color" pe un monocrom (greyscale) dispozitiv min-resolution Rezoluția minimă a dispozitivului, folosind dpi sau DPCM min-width Lățimea minimă a zonei de afișare, cum ar fi o fereastră de browser monochrome Numărul de biți pe "color" pe un monocrom (greyscale) dispozitiv orientation Orientarea portului de vizualizare (landscape or portrait mode) overflow-block Cum conținutul mâner dispozitiv de ieșire năvălind portul de vizualizare de-a lungul axei bloc (added in Media Queries Level 4) overflow-inline Poate un conținut care se revarsă portul de vizualizare de-a lungul axei inline se scrolled (added in Media Queries Level 4) resolution Rezoluția dispozitivului de ieșire, folosind dpi sau DPCM scan Procesul de scanare a dispozitivului de ieșire update-frequency Cât de repede se poate dispozitivul de ieșire a modifica aspectul conținutului (added in Media Queries Level 4) width Lățimea viewport
Mai multe exemple
Exemplu
Utilizați regula @media pentru a face designul receptiv:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS Media Interogări