构建媒体查询

Question

我正在尝试从最低分辨率到最高分辨率来构建媒体查询。但我确信我在这里遗漏了一些非常愚蠢的东西。请看：

流体样式表：

@media ( max-width : 360px){

    .flicker-nav{
        top:2px;
        min-height: 40px;
    }
}

@media  ( min-width: 361px ) and ( max-width: 480 px ) 
and (orientation: landscape) {

    .flicker-nav{
        top:3px;
        min-height: 60px;
    }
}

@media ( min-width: 361px ) and ( max-width: 480 px ) 
and ( orientation:portrait ) {
    .flicker-nav{
        top:3px;
        min-height: 50px;
    }
 }
@media  ( min-width: 481px ) and ( max-width: 768 px ) 
and ( orientation: landscape ) {
    .flicker-nav{
        top:3px;
        min-height: 60px;
    }
 }

@media ( min-width: 481px ) and ( max-width: 768 px ) 
and ( orientation: portrait ) {
    .flicker-nav{
        top:2px;
        min-height: 40px;

    }
 }
@media  ( min-width: 769 px ) and ( max-width: 1280 px ) {
    .flicker-nav{
        top:4.5px;
        min-height: 75px;
    }
}

@media ( min-width: 1281 px ) and ( max-width: 1440 px ) {
    .flicker-nav{
        top:5px;
        min-height: 80px;
    }
 }
@media ( min-width: 1441 px )  {
    .flicker-nav{
        top:8px;
        min-height: 100px;

    }
 }

正常样式表：

.flicker-nav {
    z-index: 500;
    position:fixed;
    width: 100%;
    background-color: white;
}

我还使用以下 JS 在每次调整屏幕大小时重新调整父 div 的大小：

JS：

function reset_demensions() {
    doc_height = $(window).height();
    doc_width = $(window).width();
    $(".flicker-div").css("min-width", doc_width + "px");
    $(".flicker-div").css("min-height", doc_height + "px");
 }
$(document).ready(function() {
    reset_demensions();
    $(window).resize(function() {
        $.doTimeout('resize', 350, function() {
            reset_demensions();
        });

    });

});

但毕竟这些无论我如何调整窗口大小，浏览器中都没有反映流片的内容。经过深入调查，我发现浏览器读取流体文件的方式与第一个查询不同（一定有一些语法错误）

@media ( max-width : 360px){ }

其他的都读作

@media not all { }

请帮我解决这个问题。对于这么长的帖子，我真的很抱歉，但我真的无法让它更短。

Answer 1

您有许多验证错误。 validator 表示唯一有效的代码是：

@media ( max-width : 360px){
    .flicker-nav{
        top:2px;
        min-height: 40px;
    }
}

看起来大部分问题都源于单位前的空格（例如，1281 px 应该是 1281px）

只有 0 可以是长度。您必须在您的号码和 (max-width: 1440 px) { .flicker-nav{ top:5px;最小高度：80px； } }