CSS2 Introdus Tipuri de media
@media Regula, introdusă în CSS2, a făcut posibil să se definească reguli de stil diferite pentru diferite tipuri de media.
Exemple: Ai putea avea un set de reguli de stil pentru ecrane, unul pentru imprimante, unul pentru dispozitive portabile, unul pentru dispozitive de tip de televiziune, și așa mai departe.
Din păcate, aceste tipuri de media nu a primit o mulțime de sprijin de dispozitive, altele decât tipul de suport de imprimare.
CSS3 introduce Media Interogări
interogări media în CSS3 extinde CSS2 tipuri de media idee: In loc de a căuta un tip de dispozitiv, se uita la capacitatea dispozitivului.
interogări media pot fi folosite 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
Utilizarea interogări media sunt o tehnică populară pentru livrarea unei foi de stil croită la tablete, iPhone, și androizi.
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin regula @media.
| Proprietate | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media interogare Sintaxă
O interogare media constă dintr-un tip de media și poate conține una sau mai multe expresii, care hotărâm să fie adevărate sau false.
@media not|only Rezultatul interogării este adevărat dacă tipul de suport specificat se potrivește cu tipul de dispozitiv a documentului este afișat în și toate expresiile din interogare mass-media sunt adevărate. Atunci când o interogare media este adevărat, se aplică regulile de foi de stil sau stil corespunzătoare, în conformitate cu normele obișnuite în cascadă. Dacă nu utilizați operatorii nu numai sau, tipul de suport este opțională , iar all tipul va fi implicat.
Puteți avea, de asemenea, diferite stylesheets pentru diferite medii:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">
Tipuri de CSS3 Media
Valoare Descriere all Folosit pentru toate dispozitivele de tip mass-media print Folosit pentru imprimante screen Folosit pentru ecrane, tablete, smart-phone-uri etc. speech Folosit pentru că cititoarele de ecran "reads" pagina cu voce tare
Media Query-uri Exemple simple
O modalitate de a utiliza interogări media este de a avea o secțiune CSS alternativă chiar în interiorul foaia de stil.
Exemplul următor schimbă background-color pentru lightgreen dacă portul de vizualizare este de 480 pixeli lățime sau mai lat ( în cazul în care portul de vizualizare este mai mică de 480 de pixeli, background-color de background-color va fi roz):
Exemplu
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Încearcă - l singur » Următorul exemplu arată un meniu care va pluti la stânga paginii dacă portul de vizualizare este de 480 de pixeli sau mai mare (în cazul în care portul de vizualizare este mai mică de 480 de pixeli, meniul va fi pe partea de sus a conținutului):
Exemplu
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Încearcă - l singur »
CSS3 @media de referință
Pentru o imagine de ansamblu completă a tuturor tipurilor de media și caracteristici / expresii, vă rugăm să se uite la @media regulă în referința noastră CSS.