0

CSS スタイルの Web サイトの @media に問題があります。現在、Web ページを fire fox でテストすると、450px に縮小してもすべて正常に動作します (停止する前に縮小できる範囲はこれだと思います)。 ）。ただし、Chrome でテストすると、画面が縮小されたときにメディア スタイルが呼び出されていないように見えます。この上でテストすると、私の Android ブラウザーでは動作しません。

どこが間違っているのか誰か教えてください。Web URL は (now.hidden-due の質問に回答したため) で、css からコードの一部をここにドロップします。ページを機能させるためにさまざまなことを試してきたメディアの幅は無視してください。

ああ、私も -webkit-min-pixel-ration:0 を使用してみましたが、これがどのように機能するのかよくわかりません。

ここにCSSがあります

@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;                   
}

#page { margin-top: -130px;

}



.flex-direction-nav li a.prev {
    background-position: 0 0;
    left: -20px;
    display:none;
}

.flex-direction-nav li a.next {
    background-position: -52px 0;
    right: -21px;
    display:none;
}

nav li a {
        width: 50%;
        border-bottom: 1px solid #fff;
        font: 400 13px/1.4 Georgia, "Times New Roman", Times, serif;
        margin-bottom: 10px;
    }

nav small {

    display:none;

}

.pannels {   max-width:178px;           }

}

@media (max-width: 450px) {

        nav li a {
        width: 50%;
        font: 400 12px/1.4 Georgia, "Times New Roman", Times, serif;
        padding-top: 12px;
        padding-bottom: 12px;
        }

 #underline { margin-top: 33px;

}

.pannels {   max-width:178px;           }

    nav li:nth-child(even) a {
        border-right: none;
    }

    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }



    #content .gallery-columns-2 .gallery-item {
        width: 45%;
        padding-right: 4%;
    }
    #content .gallery-columns-2 .gallery-item img {
        width: 100%;
        height: auto;
    }
#tea-image { display:none; }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    body {
        padding: 0;
    }
    #page {
        margin-top: 0;
    }
    #branding {
        border-top: none;
    }


#tea-image { display:none; }



}
4

1 に答える 1

0 
@media (max-width: 555px) {
    .invisible2 { display:none; }
    .center-fold { left: 22%;
}

.center-foldルールの右中かっこが失われました。

于 2012-04-24T22:40:08.167 に答える