Le query @media sono state introdotte fin dal linguaggio CSS2 allo scopo di rendere i siti portabili su dispositivi differenti. Utilizzare le media query nella propria pagina HTML aiuta infatti nella definizione delle caratteristiche tecniche che lo user agent deve avere per visualizzare correttamente la pagina. Per esempio:In questo caso si richiede di caricare il foglio di stile example.css sui dispositivi di un certo tipo (screen = provvisti di schermo) e con una specifica funzionalità (color = ossia a colori). Le media query possono essere utilizzate anche come @import-rule:Si tratta quindi di espressioni logiche di tipo booleano (valore vero o falso), che possono essere sfruttate a proprio vantaggio come selettori nell'applicazione degli stili:Purtroppo, non tutti i browser supportano appieno questa funzionalità (uno fra tutti Internet Explorer), e per evitare incongruenze è necessario prendere le giuste precauzioni. Esistono infatti soluzioni, create in JavaScript, che garantiscono una buona gestione delle media query in ogni browser.

La prima, proposta da Scott Gilbertson nel suo articolo su Webmonkey è Respond, una libreria polyfill dalle dimensioni molto contenute (1 KB), che elabora — se lo user-agent non lo può fare — le query min-width e max-width e i vari media type.

La seconda soluzione è più robusta e completa: si chiama css3-mediaqueries.js e permette un supporto pressoché totale delle media query. Il lato negativo da tener presente sono le dimensioni, che in questo caso raggiungono i 15,6 KB per la versione compressa.

Infine, il programmatore Jeremy Keith suggerisce un'allettante alternativa che esclude completamente l'uso di Javascript, applicata al suo Huffduffer.