0

html ファイルで次の css コードを使用しています。

        <style>
            body{
            background: black;
            color: #fff;
            font: normal 62.5%/1.5 tahoma, verdana, sans-sarif;
        }

        h1{font-size: 2em;}
        p{font-size: 1.4em;}

        <!-- styles for smartphones and very small screen resolution -->
        @media only screen and (min-width: 320px) and (max-width: 400px)
        {
         body{background: blue;}
        }

        <!-- styles for screen resolution bigger than smartphones but smaller or equal to 1024px -->
        @media only screen and (min-width: 401px) and (max-width: 1024px)
        {
            body{background: red;}
        }

        <!-- styles for screen resolutions for a very wide resolution -->
        @media only screen and (min-width: 2000px)
        {
            body{background: green;}
        }
    </style>

画面の解像度に応じてコードが機能することを読みました。

この CSS はブラウザ ウィンドウのサイズに依存しますか? またはシステムの画面解像度がここでカウントされますか?

ブラウザ ウィンドウのサイズを変更してファイルをリロードしましたが、ページの UI/デザインに変更はありません。キャッシュもクリアしました。

ありがとう。

4

1 に答える 1

0

それはブラウザウィンドウです。これを行う方法についての素晴らしい記事です。

http://css-tricks.com/css-media-queries/

たとえば、「スクリーン」という用語は、実際のスクリーン ハードウェアではなく、出力 (メディア) に関連しています。たとえば、「print」に置き換えることができ、ファイルを印刷するときに使用されます。

于 2013-02-06T18:38:52.033 に答える