Media Queries para Diferentes niveles de zoom del Navegador


Soy un novato en el diseño responsivo usando consultas de medios CSS3. Entiendo claramente cómo nos dirigimos a diferentes dispositivos utilizando estas consultas de medios, pero el lugar donde estoy confundido es el ZOOM DEL NAVEGADOR!!.

Para Eg : Esta es mi regla css normal del cuerpo

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

Y cuando quiero cambiar esta regla css para apuntar a dispositivos cuyo ancho cae en el rango de 150px y 600px agrego esta consulta de medios en particular.

@media only screen and (min-width:150px) and (max-width:600px){

#body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}


}

Problema : Estoy usando Google Chrome y cuando me acerco a aproximadamente 200%, entonces esta consulta de medios en particular entra en juego.

¿Cómo sé qué media queries escribir para diferentes niveles de zoom o para decirlo de otra manera cuál es la relación entre los niveles de zoom del navegador y el ancho de píxel.

Author: bhavya_w, 2014-03-06

1 answers

Después de muchas búsquedas. Encontré mi respuesta.

  • No necesitamos apuntar al zoom del navegador explícitamente mediante consultas de medios. Cuando hacemos zoom en nuestro navegador se comporta como diferentes dispositivos.

    Por ejemplo: Si hacemos zoom en el nivel 175% , el ancho de píxel de nuestro tamaño de pantalla es 732px ( Puede encontrar la relación entre el zoom y el ancho de píxel en http://mqtest.io/ ) que está cerca de 768px de ipad mini. por lo tanto, puede dirigirse tanto al Ipad mini como al navegador zoom (@175%) usando una consulta de medios común

    es decir, @media screen y (min-width:732px)

    Por lo tanto, si se dirige a diferentes dispositivos utilizando consultas de medios (hacer que el sitio responda a diferentes dispositivos), se tiene en cuenta el zoom de su navegador.

 32
Author: bhavya_w,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-19 10:40:58