MediaQueries ignored from a certain resolution

Question

MediaQueries ignored from a certain resolution

Navigation

#1 by (3 votes)

3

Working with MediaQueries for responsive layout, I came across the following problem: I am setting the resolutions quietly, but when I get to 800px the setting gives 320px and 360px . It is completely ignored by the browser. What to do?

With 800px :

No800px:

/* 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%;
    }
}

html5 css3 media-queries

asked by anonymous 18.08.2014 / 18:58

1 answer

Error compiling Delphi XE5 UPD2 Query N records by Item

score 3 · Accepted Answer

Your problem lies in the order of your rules. In general, if two CSS rules "conflict" (ie both apply to the same element, with the same specificity, and each one has a different value for a property), the one that was defined then overrides the one previously defined. p>

So if one rule says largura < 360 and another says largura < 800 , a screen with width - say - 300 will activate both rules. If they conflict, the one that was defined later will take precedence.

Example 1 (see fullscreen, resize the browser window):

@media only screen and (max-width : 400px) {
    html, body {
        background-color: red;
    }
}

@media only screen and (max-width : 600px) {
    html, body {
        background-color: yellow;
    }
}

@media only screen and (max-width : 800px) {
    html, body {
        background-color: green;
    }
}

Example 2:

@media only screen and (max-width : 800px) {
    html, body {
        background-color: green;
    }
}

@media only screen and (max-width : 600px) {
    html, body {
        background-color: yellow;
    }
}

@media only screen and (max-width : 400px) {
    html, body {
        background-color: red;
    }
}

As you can see, in the first example since the screen is less than 800 the background is green and ready. In the second, it goes from green to yellow to red - since the more specific rules appear after the more general ones.