CSSレイアウトの応答

方法1：メタタグを使用して

< メタのcharset = "UTF-8" 名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1" >

完全なコードを貼り付けます。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" 名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
        体{ 
            背景：#abcdef 。
        } 
    </ スタイル> 
</ ヘッド> 
< 身体>
    
> 
</ HTML >

コードの表示

方法2：REM、メディアクエリと

完全なコードを貼り付けます。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル> 
        体{ 
            背景：#abcdef 。
        } 
        @media画面と（最大幅：1024px）{ 
            HTML { 
                フォントサイズ：20ピクセル。
            } 
        } 
        @media画面と（最大幅：{ 
            HTML { 
                フォントサイズ：16pxに。
            } 
        } 
        @media画面（最大幅：375px）{ 
            HTML { 
                フォントサイズ：12ピクセル。
            } 
        } 
        @media画面（最大幅：320ピクセル）{ 
            HTML { 
                フォントサイズ：10pxの。
            } 
        } 
        .main { 
            フォントサイズ：4rem 。
            テキスト整列：センター; 
        } 
    </スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "メイン" >は、私を見て！答えた。</ divの> 
</ ボディ> 
</ HTML >

コードの表示

レンダリング：