1

だから私はcssメディアクエリでスクリーンの3つの異なるバージョンを目指しようとしています. 高さが異なります。900px、1080px、および 1200px。私はあらゆる種類のものを試しましたが、今のところ部分的に機能する最高のものはこれです:

@media (height: 900px) {
    .body-base{
        height:78%;
    }
}

@media (height: 1080px) {
    .body-base{
        height:82%;
    }
}

@media (height: 1200px) {
    .body-base{
        height:85%;
    }
}

たとえば、上位コードは Firefox でのみ機能し、Chrome や Opera では機能しないため、部分的に機能していると言っています...何が間違っていますか? そして、この種の css 設定がすべてのブラウザーで機能する正しい方法は何ですか?

4

1 に答える 1

0

ここで Mozilla ドキュメントを確認しました:コメントで私の疑いを確認するMozilla リンク。ここでは、 aまたはのheightいずれかを前に付ける必要があります。つまり、例では。BoltClock のおかげで、実際にはプレフィックスを付ける必要がないことがわかりましたが、現在、メディア クエリがその正確な高さをターゲットにしていると想定しています。たとえば、ブラウザの高さが正確に900pxの場合にのみ使用されます。minmaxmin-heightmedia (height:900px)

ただし、Chrome ではなく Firefox で動作する理由はわかりません。min-heightブラウザは、あなたが意味しているかどうかをどのように推測できるので、おそらく両方で無視する必要がありますmax-heightが、代わりに Chrome だけがそれを無視しています。

解決

必要かどうかを決定しmin-heightますmax-height。この例ではmin-height、モバイル ファーストのアプローチとして次のように使用します。

@media (min-height: 900px) {    
    .body-base{
        height:78%;
    }
}

@media (min-height: 1080px) {    
    .body-base{
        height:82%;
    }    
}

@media (min-height: 1200px) {    
    .body-base{
        height:85%;
    }    
}
于 2013-11-13T10:30:47.843 に答える