インラインでのレスポンシブデザイン対応

下記スタイルシートをインライン(inline)で適用すると、デバイスの解像度が479px以下の場合は上のスタイルシート、480px以上の場合は下のスタイルシートが適用される。
スタイルシートは別ファイルを作るより、インラインに記載する方が読み込み速度は速いのでSEOの効果もあるかも。

<style>
    @media screen and (max-device-width: 479px) {
        #contents {
            width: 100%;
        }
    }
    @media screen and (min-device-width: 480px) {
        #contents {
            width: 980px;
        }
    }
</style>
 

• HTML5