0

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

流体样式表：

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

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

4

1 回答 1

1

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

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

看起来大多数问题都源于您的单位之前的空格（例如1281 px应该是1281px）

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

于 2013-09-24T21:20:22.427 回答