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.
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.
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