css - una - como hacer un menu horizontal en html

Consultas de medios y ancho de la barra de desplazamiento

Question

Estoy trabajando en un diseño que necesita un manejo preciso de consultas multimedia. Uno de mis problemas es el ancho de la barra de desplazamiento del explorador de navegación, ya que es diferente según los navegadores y la mayoría (¿todos ellos?) Lo incluyen en el ancho de la ventana.

Como podemos ver en estos 2 ejemplos, las consultas de medios no actúan en el mismo tamaño de ventana con y sin la barra de desplazamiento vertical:

1. Prueba sin barra de desplazamiento
2. Prueba con la barra de desplazamiento

En el primer ejemplo, puede ver que el color de fondo cambia exactamente a un ancho de ventana de 800/700/600px .
En los segundos ejemplos con la barra de desplazamiento los colores cambian en:

• Chrome y 779/679/579px
• IE: 783/783/583px

Eso hace una diferencia de hasta 21px .

¿Existe una solución al ignorar la barra de desplazamiento en las consultas de medios y centrarse en el ancho disponible en sí mismo.
Si no es así, ¿cómo manejas este problema, fijas un ancho máximo para la barra scoll y lo incluyes en las consultas de medios?

- ACTUALIZACIÓN -

Estoy buscando mejores prácticas / solución con CSS ya que me gustaría evitar JS para este proyecto.

Answer 1

Mira este ejemplo: http://stowball.github.io/mqGenie/

Funciona bien tanto en Firefox como en Chrome para mí (con barras de desplazamiento).

Puede descargar y leer más sobre este complemento aquí: https://github.com/stowball/mqGenie (~ 2.2 kb)

Una de las fuentes: https://stackoverflow.com/a/21414947/2898694

Disfrutar.