Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 6 de 6

Tema: Media Queries CSS3

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    11

    Post Media Queries CSS3

    Como se puede leer en el titulo mi problema es con el comando "Media Queries" del CSS3.

    Tengo mirado varias páginas web sobre como se usa este comando. Una de las páginas que me mire me ha parecido bastante interesantel como explica el tema. La página esta bien explicada, solo que ha la hora de usar las "Media Queries" estas no funcionan o lo hacen al reves de como deben. Para conseguir explicar mejor mi situación voy a colocar un código (con comentarios de lo que creo que hace para que, en el caso que alguien quiera ver si funcionan estos código o no lo haga personalmente) de ejemplo y lo que me gustaría que haga este código.

    Media Queries:
    Código:
    body {
       background-color: #000000;
    }
    
    <!-- Si la pantalla es menor a 800px (sin incluir el tamaño de 800px) aplicara el siguiente cambio -->
    @media screen and (max-width: 800px) {
       body {
          background-color: #858585;
       }
    }
    
    <!-- Si la pantalla es menor a 1024px y mayor a 800px aplicara el siguiente cambio -->
    @media screen and (min-width: 800px) and (max-width: 1024px) {
       body {
          background-color: #FF0000;
       }
    }
    
    <!-- Si la pantalla es mayor a 1024px y menor a 1366px aplicara el siguiente cambio -->
    @media screen and (min-width: 1024px) and (max-width: 1366px) {
       body {
          background-color: #FFFF00;
       }
    }
    
    <!-- Si la pantalla es mayor a 1366px (aplicara el siguiente cambio) -->
    @media screen and (min-width: 1366px) {
       body {
          background-color: #00FF00;
       }
    }
    Creo, por las páginas que me he leído acerca de este tema, que el código esta correctamente escrito y debería funcionar como deseo. Mi objetivo con las "MEdia Queries" es realizar las siguientes ordenes:

    1. Definir un color de fondo general.

    2. Si la pantalla tiene un tamaño de 800px o inferior aplicara otros estilos diferentes.

    3. Si la pantalla tiene un tamaño mayor a 800px pero es menor a 1024px se aplicaran otros estilos diferentes.

    4. Si la pantalla tiene un tamaño mayor a 1024px aplicar otros estilos diferente.

    Si alguien coloca un ejemplo de este código (que funcione) con simplemente cambiar el color de fondo de la página para yo comprobar que funciona me sirve. También decir que, si alguien sabe de un curso sobre las "Media Queries" que este bien y medio completo agradecería que colocase un enlace.

    De antemano gracias por la ayuda prestada.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    Hola!

    ¿Tienes esos comentarios en el archivo CSS (o dentro de la etiqueta style)? Si es así, quítalos. Los comentarios en CSS son entre /* */.

    A mi me funciona bien.

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    11
    Buenas:

    Pido disculpas por el retraso de esta respuesta. Descubrí donde estaba mi error y ahora tengo la siguientes dudas: ¿Porque el Media querie para 800px o menor no funciona?Tengo un menu desplegable dentro de un div con un tamaño definido por %,¿Porque cuando defino el tamaño del menu al 100% dentro del div este lo sobrepasa?

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    Puede ser porque el div tiene padding o margin o está flotando (float left| right).

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    11
    Pues tengo el div con un margin 0 auto; y dentro de ese es donde tengo el menu con width 100%

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    26 jul, 13
    Mensajes
    116
    Poder de Reputación
    11
    Cita Iniciado por alex222en Ver Mensaje
    Pues tengo el div con un margin 0 auto; y dentro de ese es donde tengo el menu con width 100%
    Buenas, decir que eso esta solucionado, aunque no entendí porque se me soluciono de la manera que hice pero la cosa es que funciona. Quitando eso tengo el siguiente problema, dentro del @media para pantallas entre 800px y 1024px tengo exactamente igual a las demás definido un tamaño mínimo para la pantalla, haciendo que esta después se ajuste automáticamente si aumenta. El problema es que al colocar min-width: 800px; me crea ese mínimo a los 1000px, aunque le reduzca el numero de pixeles me lo sigue definiendo a ese tamaño mínimo de 1000px. ¿Porque me puede estar pasando? Decir que tengo definido exactamente igual en los otros archivos CSS y que me funcionan a la perfección.

    Dejo el código como muestra:

    Pantalla entre 800 y 1024px
    Código:
    @media screen and (min-width: 800px) and (max-width: 1024px) {
       body {
        	min-width: 800px;
            width: 100%;
        	border-style: solid;
        	border-color: white;
        }
    
        #base {
    		width: 796px;
    		height: auto;
    		margin: 0 auto;
    		background-color: rgba(80, 80, 80, 0.8);
    	}
    
    	#pagina {
    		width: 80%;
    		height: auto;
    		margin: 0 auto;
    		background-color: rgba(255, 255, 255, 0.8);
    	}
    
    /* Cabecera */
    	/* Menu Horizontal */
    		.nav {
    			width: 93.6%;
    		}
    }
    Pantalla entre 1024 y 1365px:
    Código:
    @media screen and (min-width: 1024px) and (max-width: 1365px) {
       body {
        	min-width: 1024px;
        	width: 100%;
    	}
    
    	#base {
    		width: 1020px;
    		height: auto;
    		margin: 0 auto;
    		background-color: rgba(80, 80, 80, 0.8);
    	}
    
    	#pagina {
    		width: 80%;
    		height: auto;
    		margin: 0 auto;
    		background-color: rgba(255, 255, 255, 0.8);
    	}
    
    /* Cabecera */
    	/* Menu Horizontal */
    		.nav {
    			width: 95.2%;
    		}
    }

Temas Similares

  1. Media queries para un Responsive Design
    Por Doodleo en el foro Adaptar o Crear una web para móviles
    Respuestas: 4
    Último Mensaje: 07/09/2017, 12:02
  2. Html5 y css3
    Por paxarin en el foro Tutoriales Varios
    Respuestas: 27
    Último Mensaje: 02/07/2011, 02:49
  3. HTML5 y CSS3
    Por ZoK3R_2.0 en el foro Foro General
    Respuestas: 0
    Último Mensaje: 19/05/2011, 19:42
  4. CSS3
    Por gjulian en el foro Todo sobre Estilos CSS
    Respuestas: 11
    Último Mensaje: 07/12/2009, 17:54

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •