Estoy haciendo un sitio con la metodología "mobile first". Venía todo bien hasta que empiezo a tener algunos problemas con los media queries que se pisan, en especial los landscape. Estoy usando medidas only screen de determinados dispositvo. Por ejemplo:
Quiero que esta clase tenga un tamaño de 2em solamente en la medida 667x375 en landscape. Por eso declaro la línea only-screen. Esto en la línea de mi hoja mediaqueries.css en la linea 111.
@media only screen and (max-device-width: 677px) and (min-device-width: 375px) and (orientation: landscape) { .title-hover-content h4 { /*font-size: 2em;*/ } }
Pero ese estilo me lo pisa por otro que está en la misma hoja pero en la linea 153 porque según la filosofía "mobile first" hay que diseñar desde lo más chico a lo más grande:
@media only screen and (max-device-width: 1024px) and (min-device-width: 600px) and (orientation: landscape) { .title-hover-content h4 { font-size: 4em; } }
Quería una orientación a qué me está pasando y por qué estoy teniendo ese problema. Me resulta raro que si declaro que solo se vea con una determinada medida en una determinada, me lo pise por otra regla que dice también eso que solamente muestre en una media pero me aparece en otra.
Saludos, y gracias.
Respuestas
El problema que te está sucediendo es que has definido un diseño "responsive" en el que dos comportamientos diferentes se solapan. El navegador procesa tu CSS de la siguiente manera y en el siguiente orden:
- Si el navegador mide entre 375 y 677 píxel, usa
2em - Si el navegador mide entre 600 y 1024 píxel, usa
4em
Con valores como 375 o 1024 no va a haber problemas, pero con todos los valores enter 600 y 677 sí que vas a tener problemas. El motivo es que dos reglas diferentes dicen cosas distintas para un mismo valor. Como sabes, en CSS cuando sucede eso siempre gana el selector más específico y en caso de empate, el último que se haya definido. Así que por eso en tu caso el valor 4em machaca al 2em.
La solución sería hacer un diseño que no se solape y en el que las "fronteras" entre las diferentes fases del "responsive" estén perfectamente alineadas:
@media only screen and (max-device-width: 677px) and (min-device-width: 375px) and (orientation: landscape) { .title-hover-content h4 { font-size: 2em; } } @media only screen and (max-device-width: 1024px) and (min-device-width: 677px) /* <-- CAMBIA ESTO (aquí antes ponía 600px) */ and (orientation: landscape) { .title-hover-content h4 { font-size: 4em; } }
@javiereguiluz
Ya lo cambié y me sigue pisando otro, ¿debería ver en todas las declaraciones lo que me decís para que no se pisen estilos?
@jonatancaudo
Sí, deberías cambiarlo en todos los casos en los que se produce ese solapamiento. Lo que te recomiendo es que aproveches los cambios para simplificar un poco los estilos. Como estás trabajando con "mobile first", no hace falta que indiques la anchura máxima del dispositivo. Basta con indicar le anchura mínima y definir los estilos siempre del más pequeño al más grande.
Si te fijas por ejemplo en el código de Bootstrap, ellos lo resuelven simplemente con:
@media (min-width: 768px) { /* ... */ } @media (min-width: 992px) { /* ... */ } @media (min-width: 1200px) { /* ... */ }
Si lo haces en ese orden, no hace falta que te líes con las anchuras máximas.
@javiereguiluz
Ya hice varios sitios con esas medidas pero en la parte mobile muchas veces las cosas quedan mal por la tanta variedad de pantallas, por eso quise ser más específico y agrupar pantallas en mediaqueries y mostrar contenido con la regla onlyscreen.
@jonatancaudo
Hola.. te hago una consulta! por lo principal aclararte que soy novato en responsive..
trabajando con una web, estas son mis medidas.. el problema que tengo es que en la primer medida pongos mis reglas en lo que es tipografias, font size etc y son respetada ahora cuando quiero ponerlas en las demas medidas no me las tomas.. la idea es que en las demas medidas los tamaños van cambiando para mejor lectura.. que puede ser que este haciendo mal? alguna idea..?
@media only screen and (min-width: 360px) and (max-width: 480px) {
carousel {
height: 70px; font-size:18px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; }
texto1 {
height: 45px; font-size:12px; color:#ffffff; text-shadow: 4px 4px #000000;}
carousel2 {
height: 70px; font-size:18px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; }
texto2 {
height: 45px; font-size:12px; color:#ffffff; text-shadow: 4px 4px #000000;}
carousel3 {
height: 70px; font-size:16px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; */
}
texto3 {
height: 45px; font-size:10px; color:#ffffff; text-shadow: 4px 4px #000000; }
}
// Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767px) {
carousel {
height: 70px; font-size:28px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; }
texto1 {
height: 45px; font-size:22px; color:#ffffff; text-shadow: 4px 4px #000000;}
carousel2 {
height: 70px; font-size:28px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; }
texto2 {
height: 45px; font-size:22px; color:#ffffff; text-shadow: 4px 4px #000000;}
carousel3 {
height: 70px; font-size:28px; color: hsla(127,86%,30%,1.00); font-family: 'Signika', sans-serif; text-shadow: 4px 4px #000000; */
}
texto3 {
height: 45px; font-size:22px; color:#ffffff; text-shadow: 4px 4px #000000; }
} // Medium devices (tablets, 768px and up) @media (min-width: 769px) and (max-width: 991px) {
}
// Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199px) {
}
// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) {
@diecoronel