0

私はクロムv28、Firefox v222、およびIE8で実行しようとしているこのCSSスタイルを持っています:

html, body{
            margin: 36px;
            width: 100%;
            background-color: black;
        }

        @media screen and (max-width: 768px){
            html, body{
                width: 100%;
                height: 100%;
            }

            #page {
                margin: 20px;
                width: 100%;
                background-color: red;
            }
        }

マークアップとして次を追加します。

<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>

ウィンドウを最小化しても色が赤に変わらない理由を理解したいだけです。

どんなヘルプも大きな助けになります。

ありがとうラジャ

4

1 に答える 1

1

#pageコンテンツがないためheight:0px;、次のことを試してください: (作業中の jsFiddle )

@media screen and (max-width: 768px){
    html, body{
        width: 100%;
        height: 100%;
    }

    #page {
        margin: 20px;
        width: 100%;
        height:100%; /* set the height */
        background-color: red;
    }
}

質問への追加 - 背景の変更 - については、次のように CSS の順序を逆にする必要があります。

<style> 

html, body{ 
    margin: 36px; width: 100%; height: 100%; 
} 
body{ background-color: black; } /* This should be first for the media query to override */

@media screen and (max-width: 768px){ 
    html, body{ margin: 20x; } 
    body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
} 

</style>
于 2013-07-28T17:31:49.390 に答える