Quanti livelli di @media conviene impostare?

[Rickycast]

Sto rifacendo un Sito nel quale già avevo utilizzato le @query e mi sto ponendo una domanda: quanti livelli @query conviene impostare in un mondo nel quale i monitor sono sempre più definiti?
Magari è una domanda oziosa, ma mi piacerebbe che il nuovo Sito offrisse la massima fluidità in tutte le diverse dimensioni nelle quali venga visitato. È evidente che se si impostano molti livelli di @query, anche se si riduce a piacere la dimensione della pagina, si dovrebbero avere visualizzazioni più accurate, ma è anche vero che non se ne possono impostare infinite. Vorrei avere l'opinione dei "guru" del Web e/o magari anche le osservazioni di merito.
Grazie

[SoloWiFi]

Io in genere non le uso.
Imposto tutte le dimensioni in ems, compresa la dimensione dei caratteri.

[Rickycast]

Io in genere non le uso.
Imposto tutte le dimensioni in ems, compresa la dimensione dei caratteri.

Forse mi sono perso qualcosa. Se ho capito bene, impostando le dimensioni in ems non avrei bisogno dei @query? Se è così, proprio non lo sapevo; mi potresti dare alcune spiegazioni in più? comunque poi approfondirò per conto mio.
Grazie.

[SoloWiFi]

Tu vuoi utilizzare @media per rendere il sito responsive.
L'approccio non è errato ma molto limitato visto che sono in continua produzione smartphone con schermi sempre più grandi o più piccoli e con risoluzioni sempre più spinte.
Alla fine del lavoro ti rendi conto che devi sempre mettere mano ai @media perchè non ti offrono più il risultato da te voluto.

In pratica devi agire diversamente per avere lo stesso risultato.
La misura EMS non è altro che proporzionata al tipo di font che stai utilizzando o che il dispositivo riesce a gestire.
Con questa misura avrai sempre la stessa proporzione per ogni tipo di display.

Ma questo non basta per avere un responsive.
Devi dividere la larghezza del display in 12 parti.
In questo c'è bootstrap che insegna molto ma si tira dietro una montagna di informazioni che non userai mai. Quindi vanno riprodotte nel tuo CSS.

Quindi il 100% del display non sarà altro che 12/12 (semplificato 1/1)
1/12 di tutto lo schermo sarà 8.33% (arrotondato)
2/12 = 16.66%
3/12 = 24.99%
4/12 = 33.32%
5/12 = 41.65%
6/12 = 49.98%
7/12 = 58.31%
8/12 = 66.64%
9/12 = 74.97%
10/12 = 83.30%
11/12 = 91.63%
12/12 = 100%

quindi possiamo creare un CSS tipo questo:

.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 24.99%;
}
.col-4 {
    width: 33.32%;
}
.col-5 {
    width: 41.65%;
}
.col-6 {
    width: 49.98%;
}
.col-7 {
    width: 58.31%;
}
.col-8 {
    width: 66.64%;
}
.col-9 {
    width: 74.97%;
}
.col-10 {
    width: 83.30%;
}
.col-11 {
    width: 91.63%;
}
.col-12 {
    width: 100%;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    min-height: 1px;
    float: left;
}

Esempio di utilizzo:
Devi avere 2 div allineati che prendano tutto lo schermo

<div class="col-6">
...
</div>
<div class="col-6">
...
</div>

Altro esempio sulla stessa linea di un div piccolo + un div piu grande + 1 div che prende tutto il resto dello spazio

<div class="col-2">
...
</div>

<div class="col-4">
...
</div>

<div class="col-6">
...
</div>

La somma dei div sulla stessa riga ti deve sempre dare 12

Guarda questo sito che ho realizzato in questo modo http://www.imede.it/
Guardatelo su diversi dispositivi e orienta il display sia in verticale che orizzontale o riduci la pagina a piacere (su desktop)

Studiati BootStrap che ha molto da insegnare.