Tema: problemas con el zoom
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/09/2015, 17:35
Avatar de AngelKrak
AngelKrak
 
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 6 meses
Puntos: 91
Respuesta: problemas con el zoom
amigo eso es porque tus medidas estan por porcentaje por mas que hagas zoom estas se adaptaran a tu pantalla y no importa cuanto zoom hagas ;)

Prueba con este codigo y veras algo de diferencia al hacer zoom ;)
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.             
  8.  
  9.         <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  10.         <script type="text/javascript" src="d3.v2.min.js"></script>
  11.     <style type="text/css">
  12.  html {
  13.          font-size: 10pt;
  14.     }
  15.     
  16.     #supercapa {width: 100%; margin: 0px auto; padding: 0px; background:#C0C0C0;}
  17.     #capa1 {width: 35%; height: 100vh; left:7.5%; top:7%; background-color: #FF0000;float: left}
  18.     #capa2 {width: 35%; height: 100vh; right:7.5%; top:0%; background-color: #0000FF;float: right;}
  19.     
  20.     select::-ms-expand {
  21.     display: none;
  22. }   
  23.     
  24.     #mySelect{
  25.                   position:absolute;
  26.                   display: inline-block;
  27.                   z-index: 3;
  28.                   -moz-appearance: none;
  29.                   -webkit-appearance: none;
  30.                   appearance:none;
  31.                   cursor: pointer;
  32.                   
  33.                   background: #a1b74b;
  34.                   left:18%;
  35.                   width: 14%;
  36.                   height: 6%;
  37.                   top: 3%;
  38.                   
  39.                   font-size:1.2vw;
  40.                   font-family:verdana;
  41.                   font-weight: bold;
  42.                   padding-left: 0.4%;
  43.                   color:#e2e3db;
  44.                    
  45.                    
  46.                    box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
  47.                    
  48.                    border: none !important;
  49.                    border-radius:2vw;
  50.                                
  51.                                   
  52.                    
  53.                 }
  54.     #mySelect:hover{ -moz-box-shadow: 0 0 18px #336600; -webkit-box-shadow: 0 0 18px #336600; box-shadow: 0 0 18px #336600; }
  55.     
  56.     
  57.     
  58.     
  59.     
  60.     </style>
  61.     
  62.     </head>
  63. <body>
  64.  
  65.         
  66.     <div id='supercapa'>
  67.                 
  68.                 
  69.                 <select id="mySelect">
  70.                     
  71.                      <option value="select">select</option>
  72.                      <option value="volvo">Volvo</option>
  73.                       <option value="saab">Saab</option>
  74.                       <option value="mercedes">Mercedes</option>
  75.                       <option value="audi">Audi</option>
  76.                     
  77.                 </select>
  78.             
  79.             
  80.         
  81.         <div id='capa1'></div>
  82.                             
  83.                 
  84.         <div id='capa2'></div>
  85.             
  86.         
  87.     </div>
  88. </body>
  89. </html>