css - 构建媒体查询

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();
        });

    });

});

但毕竟这些无论我如何调整窗口大小，浏览器中都不会反射(reflect)流体表的内容。在更深入的调查中，我发现浏览器读取流体文件的方式与第一个查询不同(一定有一些语法错误)

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

它被读作所有其他的

@media not all { }

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

Answer 1

您有许多验证错误。 validator说唯一有效的代码是这样的:

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

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

only 0 can be a length. You must put a unit after your number and ( max-width: 1440 px ) { .flicker-nav{ top:5px; min-height: 80px; } }