Media Comportamento di tipo interrogativo sulla larghezza di un div specifico

Question

Sto costruendo un editor in cui il contenuto di un post è caricato in un div e i selettori jQuery mi consentono di modificare il contenuto in linea.

Ho appena incontrato un ostacolo mentre stavo cercando di aggiungere un po 'di reattività allo stile dei modelli: nei fogli di stile del mio modello, utilizzo un ID specifico dell'area di anteprima per specificare dove deve essere applicato lo stile . Applico lo stesso id al tag body della visualizzazione del post in modo che sia l'anteprima nell'editor sia la visualizzazione completa del post siano uguali.

Stavo inserendo alcune query multimediali sul lato vista delle cose e mi sono reso conto che nella pagina di anteprima, qualcosa come @media screen and (max-width: 640px) si comporta in modo diverso perché l'anteprima non occupa l'intera larghezza dello schermo.

C'è un modo per utilizzare un selettore di query multimediali diverso dalla larghezza dello schermo, ma invece la larghezza di un elemento .. o qualcosa di equivalente? O ci potrebbe essere un altro modo di mimare il comportamento semplicemente con javascript ..

Answer 1

Sfortunatamente non esiste attualmente un modo per una query multimediale di indirizzare un div. Le query multimediali possono riguardare solo lo schermo, ovvero la finestra del browser, lo schermo del dispositivo mobile, lo schermo TV, ecc ...

Answer 2

Per ora sto usando:

.preview { 
    zoom: .8; 
    -moz-transform: scale(0.8);} 

quando il div .preview è l'80% della larghezza della pagina. Funziona generalmente, ma con alcuni problemi, e non è completamente flessibile poiché i div in questione non saranno sempre impostati su% della larghezza della pagina.