CSS媒体查询无法在特定屏幕上加载

Question

I have to apply height for two different screen 1080px and 1000px.

I have added following media query:

@media only screen and (max-height:1080px){
    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }
    .filter-selection ul li
    {
        height:109px;
    }
}


@media only screen and (max-height:1000px){
    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;
    }
}

When i switched to 1080px the issues remain's same, it call's the media query for 1000px.

http://ddslauncher.com/inventory-new/

Thanks in advance.

Answer 1

The media queries in your example are the other way round from your question. They are:

@media only screen and (max-height:1000px){

    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;;
    }
}


@media only screen and (max-height:1080px){
    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }

    .filter-selection ul li
    {
        height:109px;;
    }
}

(the issue here is that when the screen is below 100px in height both queries match and the second one is applied ass CSS 'cascades' down.)

instead of:

@media only screen and (max-height:1080px){

    #wrapper {
        width: 1884px;
        height: 1080px;
        float: left;
    }

    .filter-selection ul li
    {
        height:109px;
    }
}


@media only screen and (max-height:1000px){
    #wrapper {
        width: 1884px;
        height: 1000px;
        float: left;
    }

    .filter-selection ul li
    {
        height:106px;
    }
}

Using this second example should fix your issue.

EDIT Apologies for the formatting issues, something is interfering with my SO edits.

Answer 2

You can use the percentage width instead of fixed. something like the following. Also it would be great if you can run the media query based on Viewport width not height.

@media only screen and (max-height:1080px){
#wrapper {
width: 100%;
height: 1080px;
float: left;
} 
}

Answer 3

I saw yours stylesheet. in css u have "min-height". I suggest to change into max-height, and used "!important" adnotation.