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

    });

});

しかし、これらすべての後、ウィンドウのサイズを変更しても、流体シートの内容はブラウザに反映されません。より詳細な調査の結果、最初のクエリとは別に、ブラウザーが別の方法で Fluid ファイルを読み取っていることがわかりました (何らかの構文エラーがあるはずです)。

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

他のすべては次のように読み取られます

@media not all { }

これを理解するのを手伝ってください。こんなに長い投稿で本当に申し訳ありませんが、これ以上短くすることはできませんでした。

4

1 に答える 1

1

多数の検証エラーがあります。バリデータによると、有効なコードは次のとおりです。

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

ほとんどの問題は、ユニットの前のスペースに起因するようです (例: 1281 pxbe 1281px)

長さにできるのは 0 だけです。数字と ( max-width: 1440 px ) { .flicker-nav{ top:5px; の後に単位を付ける必要があります。最小高さ: 80px; } }

于 2013-09-24T21:20:22.427 に答える