Sto lavorando su un layout che richiede una gestione precisa delle query dei media. Uno dei miei problemi è il crossbrowser larghezza della barra di scorrimento in quanto è diverso in base ai browser e la maggior parte (tutti loro?) Lo include nella larghezza della finestra.Media query e larghezza della barra di scorrimento
Come possiamo vedere in questi 2 esempi, le media query non agiscono con le stesse dimensioni della finestra, con e senza la barra di scorrimento verticale:
In Nel primo esempio, è possibile vedere il cambiamento del colore dello sfondo esattamente alla larghezza della finestra 800/700/600px.
Nel secondo esempi con la barra di scorrimento i colori cambiano a:
- Chrome e Firefox:
779/679/579px - IE:
783/783/583px
che fa la differenza fino a 21px.
È possibile aggirare ignorando la barra di scorrimento nelle query multimediali e concentrarsi sulla larghezza disponibile.
In caso contrario, come si gestisce questo problema, si risolve una larghezza massima per la Scollbar e la si include nelle query multimediali?
- AGGIORNAMENTO -
Sto cercare le migliori pratiche/soluzione con i CSS come vorrei evitare di JS per questo progetto.
Il suo aspetto è simile ad un altro compito. Prova questo: [http://stackoverflow.com/questions/15976531/dealing-with-scroll-bars-and-jquery-width-method] [1]: http://stackoverflow.com/questions/15976531/dealing-with-scroll-bars-and-jquery-width-method – Petroff
@Nividim Ho visto questa domanda ma la risposta non corrisponde alle mie esigenze, sto cercando una soluzione css. –
@ web-tiki, la mia risposta ti ha aiutato? eventuali commenti? non è accettato, fammi sapere se qualcosa non va, per favore, proverò ad aggiungere ulteriori informazioni o spiegando. –