John
Intentando modificar el css de un elemento si la resolución de la pantalla es inferior a 960px
mi código no funciona, no veo ningún error en firebug.
<script type="text/javascript">
jQuery(window).resize(function() {
if (jQuery(window).width() < 960) {
jQuery(".snow").css('display', 'none');
}
});
</script>
ACarter
Puedes hacer esto completamente con CSS usando el @media dominio.
@media (max-width:960px) { css... } //nothing with screen size bigger than 960px
@media (min-width:960px) { css... } //nothing with screen size smaller than 960px
Ver aquí
Jason Whitted tiene un buen punto, esto es solo CSS 3, por lo que no funcionará con navegadores más antiguos (aunque debería funcionar con todos los navegadores modernos). Ver aquí por compatibilidad. Sus principales problemas serán IE 8 y menos.
Editar – selección de dispositivo
@media screen { .nomobile { display: block; } } //desktops/laptops
@media handheld { .nomobile { display: none; } } //mobile devices
O podría suponer que los dispositivos móviles tendrán un ancho más pequeño y continuar.
-
Esto requiere un navegador compatible con CSS3, pero esta es una solución ideal.
– Jason Whitted
20 de diciembre de 2012 a las 19:53
-
tenga en cuenta que si está creando algún tipo de sitio web con capacidad de respuesta fluida, el ancho de js y el ancho de consulta de medios son diferentes debido a la barra de desplazamiento. Es posible que deba sincronizarlo si es necesario
– Huangismo
20 de diciembre de 2012 a las 19:54
-
Debería haber dicho que lo necesito para un sitio receptivo, necesito ocultar el div en dispositivos móviles y tabletas, ¿aún funcionará @media?
– John
20 de diciembre de 2012 a las 20:04
-
sí, siempre y cuando su capacidad de respuesta se base únicamente en el ancho del navegador. En el proyecto en el que estoy trabajando ahora, también tenemos clases de cuerpo que identifican si el usuario está viendo en un teléfono/tableta, pero todavía basamos nuestro css principal en el ancho. Entonces, incluso si está en el escritorio y cambia el tamaño al tamaño del teléfono, verá la versión del sitio para teléfono
– Huangismo
20 de diciembre de 2012 a las 20:04
-
Acabo de probar @media y funciona perfectamente, además aprendí algo nuevo, ¡gracias!
– John
20 de diciembre de 2012 a las 20:11
¿Puede proporcionar un pequeño ejemplo independiente, que contenga el código suficiente para demostrar el problema, sin nada adicional?
– KatieK
20 de diciembre de 2012 a las 19:52
puede hacer esto con consultas de medios, pero ¿está viendo que la pantalla no se adjunta al elemento una vez por debajo de 960? ¿También está seguro de que el tamaño de su navegador es inferior a 960?
– Huangismo
20 de diciembre de 2012 a las 19:53
¿Estás llamando desde $(function(){}) ?
– Gato Plano
20 de diciembre de 2012 a las 19:53
¿Estás seguro de que incluyeste la biblioteca jQuery correctamente? Tu código debería funcionar.
– Andrés
20 de diciembre de 2012 a las 19:55