Sintaxa interogarilor despre mediul de prezentare

O interogare despre mediu acopera un anumit mediu de prezentare pe care multi il cunoastem atunci cand folosim¬† type=”screen” sau type=”print” pentru a atasa fisierele de stiluri. Interogarea despre mediu adauga caracteristici logice acestor tipuri de medii de prezentare si in efect ne permite sa cream declaratii conditionale – precum cele relative la dimensiunea ecranului unui dispozitiv pe care este afisata pagina.¬† Atunci cand aceste declaratii sunt adevarate, sunt aplicate regulile de stil continute in interogare. Interogarile despre mediu au urmatoare sintaxa:

@media[not|only] type [and] (expression) }

rules;

}

Sa examinam dclaratia in detaliu: cuvantul cheie not (optional) neaga interogarea, practic spunand “daca ceea ce urmeaza nu este adevarat, aplica aceste stiluri”. Cuvantul not neaga intreaga interogare, asadar

@media not screen and (min-width: 600px)

este evaluata la

@media (not screen) and (min-width: 600px)))

si nu la

@media (not screen) and (min-width: 600px)

Cuvantul cheie only forteaza doar acele browsere care suporta interogarile despre mediu din CSS3 sa evalueze expresia. In esenta, ascunde codul CSS de browserele mai vechi.

@media only all and (device-aspect-ratio: 16/9)

Type se refera la tipul de mediu, cum ar fi tiparitura, dispozitiv mobil, ecran sau in acest caz toate.

Cuvantul cheie and ne permite creearea unor interogari complexe:

@media screen and (min-width: 600px) and (max-width: 1200px)

Declaratia va aplica secventa css inglobata la viewporturile de tip ecran, unde latimea este de cel putin 600 de pixeli, dar nu mai mare de 1200 de pixeli. And-ul logic este folosit pentru a adauga limitari unei interogari; poate fi folosit de cate ori doriti.

Si in sfarsit, expression este caracteristica mediului pe care vrem sa o testam. Din nou, de cele mai multe ori, veti folosi doar cateva dintre ele. De fapt, respond.js al lui Scott Jehl activeaza doar min-width si max-width in browserele care nu le suporta. Este un script foarte util, deoarece multe layouturi adaptabile testeaza doar latimea viewportului.

Un fapt mai putin cunoscut este ca interogarile despre mediu din CSS permit si un SAU logic. In acest scot poate fi utilizata virgula:

@media screen and (min-resolution : 300dpi), screen and (-webkit-min-device-pixel-ratio:2)

Declaratia zice “aplica secventa CSS pe ecrane daca densitatea pixelilor este cel putin 300 dpi sau daca exista 2 pixeli ai aparatului pentru fiecare pixel CSS”. Ca sa spunem adevarul, inca nu este un exemplu din realitate; aceste caracteristici nu sunt prea bine suportate.

Interogarile media pot fi folosite in cadrul fisierelor CSS:

@media screen and (min-width: 600px) {

/*reguli*/

}

Ina pot fi aplicate si folosint atributul media al elementului link:

<link rel=”stylesheet” hre=”style.css” media=”only screen and (min-width: 600px)”>

Si in final, ele pot fi importate folosind @import

@import url(“import.css”) only all;

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>