como aislar las propiedades de cada media queris, por ejemplo de resolucion 640px el header tanto el logo y la descripcion esten a 50% pero que no se aplique a los de 320px. Pero cuando coloco que se cambia a 50% el logo tambien aplica a la de 320px, utilizo max-width.
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
2 Respuestas
Tu explicación es bastante ambigua, así que intentare explicarte rapidamente como funcionan estos. Los media queries son bastante sencillos una vez los entiendes correctamente.
Primero, para poder utilizar los media queries necesitas un navegador moderno, o sino media-queries.js o respond.js. Debes colocar el meta <meta name="viewport" content="width=device-width, initial-scale=1.0">
en el head.
/
* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
Por favor, accede o regístrate para añadir un comentario.
Hola Roning,
los media querys se aplican al cumplir con la regla dada en su definición. Generalmente se usan las reglas min-width
o max-widht
, para aplicar el estilo que corresponda cuando la regla se cumple.
Fijate entonces que por ejemplo la regla max-width: 640px
se aplicará para una resolución de 640px o inferior. Cuando llega la regla max-width: 320px
con una pantalla de por ejemplo 300px, se cumplen tanto las reglas para 640 como para 320, siendo que el navegador mostrará en caso de concordar más de una regla la última que encuentre.
En tu caso, con el orden que pusiste las reglas, entra a la media query de 320px, pero después entra también a la de 640px, y como esta es la última es la que queda.
Usar max-widht
se comporta como "este tamaño o menor" y en cambio usar min-width
se comporta como "este tamaño o mayor".
Por esto, cuando se ponen reglas max-width
se suelen escribir ordenadas de mayor a menor, de forma tal que se vea que se interpetan de arriba hace abajo, y la que valdrá será la última. Se organizan al revés para min-width
Si usás esta estrategia, tenés que ordenar coherentemente con la regla las querys.
Tambíen se puede tener un estilo autocontenido en una media query que no se "desborde" a las siguientes con esta sintaxis:
@media screen and (min-width: 321px) and (max-width: 640px) { ...
Con esta regla, el estilo se aplicará solo a resoluciones mayores de 321px y menores de 640px y no a mayores de 640px o menores a 320px.
Sin embargo esto es poco usado porque por ejemplo al disminuir la resolución, es habitual que se desee que las reglas de la resolución superior también sigan vigentes en vez de pasar a las reglas generales.
En resumen: para tu problema, invertí el orden de la definición o acotala entre min y max.
Saludos!
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 407091
- 1
- Jul 5, 2015
Sin Respuesta
-
- 156
- 0
- Mar 19
-
- 75
- 1
- Feb 26
-
- 188
- 0
- Ene 30
-
- 1016
- 0
- Nov 7, 2023
-
- 289
- 0
- Sep 19, 2023
-
- 301
- 0
- Ago 21, 2023
-
- 382
- 0
- May 14, 2023
-
- 352
- 0
- Abr 21, 2023
- ver todas
Actividad Reciente
Santiago2610 comentó Mar 23
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scrapingParkJo preguntó Ene 30
No me deja instalar Oracleelporfirio respondió Ene 10
Actualizar la imagen con los datos devuelto en un …ovedg preguntó Dic 31, 2023
Actualizar la imagen con los datos devuelto en un …Ehdez preguntó Nov 7, 2023
Necesito en wordpress un pluging que me calcule la…pedrourday preguntó Sep 19, 2023
Alternativas a ThreeJS y BabylonJS?pedrourday preguntó Ago 21, 2023
¿Que tecnologias y lenguajes me recomiendan?Fabio respondió Jul 11, 2023
plugin de efecto circular 3d en imagenes
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150460 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos