[SOLUCIONADO] Media queries

[helenp]

Hola,
Estoy haciendo mi web adaptable, no es perfecto, pero intento hacer lo más rápido, y más adelante verlo más tranquilo.
Os pregunto si se puede poner las queries de ese modo,
tengo tantos porque hay algunas cosas (pocas) que se pone feo.
Lo que no entiendo es que si con chrome - herramientas para desarrolladores lo pongo en 320px.
la clase .botonmovil sigue la regla de (min-width: 426px) and (max-width: 600px).
No lo entiendo,
No se puede ponerlo asi?:

Código CSS:

@media screen and (min-width: 200px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
@media screen and (max-width: 600px){
}
@media screen and (min-width: 370px) and (max-width: 425px){
}
@media screen and (min-width: 426px) and (max-width: 600px){
.botonmovil{position: relative;margin: -30px 0 0 0;}
}
@media screen and (min-width: 500px) and (max-width: 600px){
}
@media screen and (min-width: 601px) and (max-width: 845px){
@media screen and (min-width: 601px){
}
@media screen and (min-width: 601px) and (max-width: 989px){
}
@media screen and (min-width: 701px) and (max-width: 800px){
}
@media screen and (min-width: 801px) and (max-width: 845px){
}
@media screen and (min-width: 846px){
}
@media screen and (min-width: 900px){
}
@media screen and (min-width: 990px){
}
 

[AngelKrak]

no entiendo muy bien tu pregunta, pero si lo que quieres es que te agarre este Media querie:

Código CSS:

@media screen and (min-width: 200px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
 

debes de ponerle un Max-Width como a los otros ;)

Código CSS:

@media screen and (min-width: 200px) and (max-width: 350px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
 

[helenp]

Iniciado por AngelKrak

no entiendo muy bien tu pregunta, pero si lo que quieres es que te agarre este Media querie:

Código CSS:

@media screen and (min-width: 200px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
 

debes de ponerle un Max-Width como a los otros ;)

Código CSS:

@media screen and (min-width: 200px) and (max-width: 350px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
 

Gracias, antes no tenia ningun media query porque alli va la css base, la que está en común, puse min-width 200px para ver si lo cogía.
Pero no tiene sentido, porque lee el css cuando el width es inferior al min-width?

Yo lo que quiero es mezclar media queries con algunos min-width solo y otro que tenga tanto min como max.
Como hay reglas css que son en común, para no repetirlos para cada clase.
He estado buscando algo que lo explique pero no encuentro nada.
Gracias

[helenp]

Si no se puede mezclar solo min-width con min y max-width.
Quizas es mejor poner todos con solo min-width?
Asi lo coge?

[pzin]

Así debería de funcionar bien y funciona bien.

[helenp]

Iniciado por pzin

Así debería de funcionar bien y funciona bien.

Asi como?
A que te refieres?
El ejemplo que puse o poner solo min-width?
Gracias.

[pzin]

Iniciado por helenp

El ejemplo que puse o poner solo min-width?

¿No es lo mismo?

[helenp]

Iniciado por pzin

¿No es lo mismo?

Pensaba que si, pero me ha dicho uno que no.
Es que no entiendo porque la clase coge un estilo de 425px cuando solo uso 320px.
Osea leyendo entre lineas, los min y min-max estan bien.
Si no funciona es por otra cosa?

[AngelKrak]

amigo tu css esta asi:

Código CSS:

@media screen and (min-width: 200px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
@media screen and (max-width: 600px){
}
@media screen and (min-width: 370px) and (max-width: 425px){
}
@media screen and (min-width: 426px) and (max-width: 600px){
.botonmovil{position: relative;margin: -30px 0 0 0;}
}
 

por algo se llama Estilos en Cascada, te va a ir agarrando los estilos del ultimo, como en este caso (min-width: 426px) and (max-width: 600px) esta al "ultimo" y ese es el estilo que te funcionara en vez de (min-width: 200px), si fuera lo contrario el estilo que te agarraria seria el de la querie (min-width: 200px), un ejemplo(cambiando la posición):

Código CSS:

@media screen and (min-width: 426px) and (max-width: 600px){
.botonmovil{position: relative;margin: -30px 0 0 0;}
}
@media screen and (max-width: 600px){
}
@media screen and (min-width: 370px) and (max-width: 425px){
}
@media screen and (min-width: 200px){
.botonmovil{position: relative;margin: -25px 0 0 0;}
}
 

[NueveReinas]

Como dijo AngelKrak, tienes que ir bajando "la resolución" de las MQ según el código en sí vaya bajando.

En lugar de:

200
600
370 - 425
425 - 600

debería ser:

600
425-600
370-425
200

¿Se entiende?

[helenp]

Iniciado por NueveReinas

Como dijo AngelKrak, tienes que ir bajando "la resolución" de las MQ según el código en sí vaya bajando.

En lugar de:



debería ser:



¿Se entiende?

Ahora si lo entiendo, pero me extraña ya que lo demás funciona perfectamente......
Yo pensaba que el navegador realemente leía el query y si la resolución no cumplía, no lo ejecutaba,
como es condicional.
Pues nada a darle la vuelta.
Gracias

[helenp]

Lo estoy buscando, en serio, no lo entiendo,
si pone si minimo x y max x que ejecuta esto {
no debe de ejecutarse si no cumple la condicion.

He encontrado esta pagina, que habla de dos formas,
una es mobile first y lo hace como lo he hecho yo.
Primero lo pequeño y ir aumentando.
El segundo modelo es como lo decis vosotros (top-bottom)

Creo que ambos deben de funcionar
http://librosweb.es/foro/pregunta/18...ueries-de-css/

[javy7v]

Amigo por lo que has dicho de que querías adaptarlo rápido ahora y luego mirarlo con tiempo entiendo que es por el nuevo algoritmo de búsqueda de google.

Yo también he pasado por lo mismo XD y me parece que estas liando demasiado usando tantos queries.

En mi caso de momento para no complicarme he tirado de algo como esto:

Código:

<link href="../css/estiloGeneral.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" />

Y para aplicar el CSS hecho directamente para movil

Código:

<link href="../css/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

Si no es por el algoritmo de google disculpa ;)

[helenp]

Iniciado por javy7v

Amigo por lo que has dicho de que querías adaptarlo rápido ahora y luego mirarlo con tiempo entiendo que es por el nuevo algoritmo de búsqueda de google.

Yo también he pasado por lo mismo XD y me parece que estas liando demasiado usando tantos queries.

En mi caso de momento para no complicarme he tirado de algo como esto:

Código:

<link href="../css/estiloGeneral.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" />

Y para aplicar el CSS hecho directamente para movil

Código:

<link href="../css/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

Si no es por el algoritmo de google disculpa ;)

Si es por el algoritmo de google, pero es una web muy grande con cientos de paginas, pero tiene su diseño base, con buscar y reemplazar va bien.
Y no es tan facil, tiene tres columnas, y no puedo limitarme a dos.
Pero el motivo de tener tantos es porque el titulo, el h1 es un texto que debe de tener diferentes tamaños y con % no sale.
No son tantos con mucha información.
Mas bien tengo tres tipos, uno una columna, otra dos columnas y una con tres columnas.

Pero la questión es que no creo que el orden de los queries influye como dicen, no tiene sentido, no creo que se lee de arriba abajo sino lee solo lo que puede, es decir según la resolución.
En otros sitios donde tengo las clases o ids repetidas solo lee el primero. El que cumple las condiciones del query.
Gracias

[helenp]

Pero si tienes razón, sería mas facil, limitarse al movil.
Con solo dos queries.
Yo que sé como hay tantas resoluciones.
Es que al tener este meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
No se verá bien se es más de 4801px no?
Es una web comercial y no puedo dejar hilos sueltos.
Gracias

[helenp]

Iniciado por javy7v

En mi caso de momento para no complicarme he tirado de algo como esto:

Código:

<link href="../css/estiloGeneral.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" />

Y para aplicar el CSS hecho directamente para movil

Código:

<link href="../css/movil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

Si no es por el algoritmo de google disculpa ;)

Como leí que olvidara que resolución llevan los moviles y mirar donde queda bonito.
Los media queries de maquetación importante son estos solo:
- Basico para todos (moviles chicos incluido) una columna
- @media screen and (min-width: 426px){ una columna
- @media screen and (min-width: 601px) {dos columnas
- @media screen and (min-width: 846px){tres columnas sin el menu que tiene ancho fijo
- @media screen and (min-width: 990px) { el original con tres columnas y su menu

Los que no llevan menu llevan el menu de eso que se abre, y tambien el buscador.
Los demas queries son para cositas sin importancia

[helenp]

Ya funciona, y no era por el orden de los queries.
He puesto margin-top en vez de margin.