Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2012, 06:53
Avatar de nibollo
nibollo
 
Fecha de Ingreso: julio-2012
Mensajes: 22
Antigüedad: 12 años, 5 meses
Puntos: 2
Pregunta Ocultar Divs con CSS3 de acuerdo a la resolucion de Pantalla. PROBLEMAS!!

Hola queridos compañeros! Quisiera pedirle una ayuda con un problema que tengo acerca de ocultar divs con css3 de acuerdo a la resolucion de la pantalla, preferi cambiarmee y leer un poco sobre css3 por que javascript me resulto complicado.. :(

Este es el codigo que deseo ocultar..

Código HTML:
Ver original
  1. <div class="search_and_share">
  2.     <ul class="demo">
  3.         <li><a href="http://localhost/all/" ><span class="inicio inicio-demo-all"></span>General</a></li>
  4.     </ul>
  5.     <ul class="demo">
  6.         <li><a href="http://localhost/jobs/" ><span class="inicio inicio-demo-jobs"></span>Trabajo</a></li>
  7.     </ul>
  8.     <ul class="demo">  
  9.         <li><a href="http://localhost/realstate/" ><span class="inicio inicio-demo"></span>Casas</a></li>
  10.     </ul>
  11.     <ul class="demo">  
  12.         <li><a href="http://localhost/cars/" ><span class="inicio inicio-demo-cars"></span>Autos</a></li>
  13.     </ul>
  14. </div>

yo hice asi el css.. pero jamas me oculto nada.. :(

Código CSS:
Ver original
  1. @media screen and (max-device-max-height: 320px) and (max-device-max-width: 240px)  {
  2. .search_and_share{
  3. display:none
  4. }
  5. }
  6. @media screen and  (max-device-max-height: 240px) and (max-device-max-width: 320px)   {
  7. .search_and_share{
  8. display:none
  9. }
  10. }
  11. @media screen and (max-device-max-height: 320px) and (max-device-max-width: 480px)  {
  12. .search_and_share{
  13. display:none
  14. }
  15. }
  16. @media screen and (max-device-max-height: 480px) and (max-device-max-width: 800px)   {
  17. .search_and_share{
  18. display:none
  19. }
  20. }
  21. @media screen and (max-device-max-height: 640px) and (max-device-max-width: 480px)   {
  22. .search_and_share{
  23. display:none
  24. }
  25. }
  26. @media screen and (max-device-max-height: 800px) and (max-device-max-width: 480px)   {
  27. .search_and_share{
  28. display:none
  29. }
  30. }
  31. @media screen and (max-device-max-height: 800px) and (max-device-max-width: 600px)   {
  32. .search_and_share{
  33. display:none
  34. }
  35. }
  36. @media screen and (max-device-max-height: 1024px) and (max-device-max-width: 600px)   {
  37. .search_and_share{
  38. display:none
  39. }
  40. }
  41. @media screen and (max-device-max-height: 1024px) and (max-device-max-width: 768px)   {
  42. .search_and_share{
  43. display:none
  44. }
  45. }

Noseeee que puedeee estar maal.. pero probee en varios dispositivos moviles asi como en saucelabs.com y en quirktools.com/screenfly/ .Seria tan buenoo que alguien me pudiese ayudar, nose si esta mal el planteamiento.. Pero de Antemano Muchas Gracias!!