Trabalhando com MediaQueries para layout responsivos, me deparei com o seguinte problema: estou configurando as resoluções tranquilamente, mas quando chego na 800px
a configuração dá 320px
e 360px
. É completamente ignorada pelo browser. O que fazer?
Com 800px
:
Sem 800px
:
/* Smartphone em modo retrato */
@media only screen and (max-width : 320px) {
.logo{
background-size: 81px 49px !important;
background-image:url(../images/logo.png);
background-position: 125px 1px;
width: 100%;
height: 100%;
}
}
@media only screen and (max-width : 360px) {
.logo{
background-size: 81px 49px;
background-image:url(../images/logo.png);
background-position: 145px 1px;
width: 100%;
height: 100%;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.logo{
background-size: 81px 49px;
background-image:url(../images/logo.png);
background-position: 345px 1px;
width: 100%;
height: 100%;
}
}
@media only screen and (max-width : 800px) {
.logo{
background-size: 81px 49px;
background-image:url(../images/logo.png);
background-position: 365px 1px;
width: 100%;
height: 100%;
}
}