html - Css 媒体查询不加载特定屏幕

Question

我必须为两个不同的屏幕 1080px 和 1000px 应用高度。

我添加了以下媒体查询:

@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;
    }
}

当我切换到 1080px 时，问题仍然存在，它调用 1000px 的媒体查询。

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

提前致谢。

Answer 1

您示例中的媒体查询与您的问题相反。它们是:

@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;;
    }
}

(这里的问题是，当屏幕高度低于 100 像素时，两个查询都匹配，并且第二个查询应用 ass CSS“级联”向下。)

代替:

@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;
    }
}

使用第二个示例应该可以解决您的问题。

编辑 对格式问题表示歉意，某些东西干扰了我的 SO 编辑。