PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文

最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在します。レスポンシブなレイアウトがないと、コンピューターの Web ページが携帯電話や iPad に表示されると、エクスペリエンスが非常に悪くなり、操作が不便になり、視覚疲労が発生します。したがって、Web ページを開発するときは、レスポンシブなレイアウトが必要です。

索引

<!DOCTYPE html>
<html>
<ヘッド>
    <title>レスポンシブレイアウト</title>
    <メタ文字セット="utf-8">
    <link rel="スタイルシート" type="text/css" href="style.css">
</head>
<本文>
    <div id="コンテンツ">
        <div id="header">ヘッダー</div>
        <div id="left">左側</div>
        <div id="center">中央</div>
        <div id="right">右側</div>
        <div id="footer">下</div>
    </div>
</本文>
</html>

*{
    マージン: 0;
    パディング: 0;
}

/* 1000px を超える PC の幅に適応 */
@media スクリーンと (最小幅: 1000px) {
    ＃コンテンツ{
        幅: 960ピクセル;
        マージン:0 自動;
    }

    ＃ヘッダ{
        幅: 100%;
        行の高さ: 100px;
        フロート: 左;
        背景: #333;
        色: #fff;
        テキスト配置: 中央;
        フォントサイズ: 30px;
        下マージン: 10px;
    }

    ＃左{
        幅: 200ピクセル;
        行の高さ: 400px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
        右マージン: 10px;
    }

    ＃中心{
        幅: 540ピクセル;
        行の高さ: 400px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
    }

    ＃右{
        幅: 200ピクセル;
        行の高さ: 400px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 右;
        フォントサイズ: 30px;
        色: #fff;
    }

    #フッター{
        幅: 960ピクセル;
        高さ: 200px;
        背景: #333;
        色: #fff;
        行の高さ: 200px;
        フォントサイズ: 30px;
        テキスト配置: 中央;
        フロート: 左;
        上マージン: 10px;
    }
}


/*640〜1000のパッド幅に適応*/
@media screen かつ (最小幅: 640px) かつ (最大幅: 1000px) {
    ＃コンテンツ{
        幅: 600ピクセル;
        マージン:0 自動;
    }

    ＃ヘッダ{
        幅: 100%;
        行の高さ: 100px;
        フロート: 左;
        背景: #333;
        色: #fff;
        テキスト配置: 中央;
        フォントサイズ: 30px;
        下マージン: 10px;
    }

    ＃左{
        幅: 200ピクセル;
        行の高さ: 400px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
        右マージン: 10px;
    }

    ＃中心{
        幅: 390ピクセル;
        行の高さ: 400px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
    }

    ＃右{
        幅: 600ピクセル;
        行の高さ: 300px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
        上マージン: 10px;
    }

    #フッター{
        幅: 600ピクセル;
        高さ: 200px;
        背景: #333;
        色: #fff;
        行の高さ: 200px;
        フォントサイズ: 30px;
        テキスト配置: 中央;
        フロート: 左;
        上マージン: 10px;
    }
}


/* 640 未満のモバイル端末の幅に適応 */
@media スクリーンと (最大幅: 639px) {
    ＃コンテンツ{
        幅: 400ピクセル;
        マージン:0 自動;
    }

    ＃ヘッダ{
        幅: 100%;
        行の高さ: 100px;
        フロート: 左;
        背景: #333;
        色: #fff;
        テキスト配置: 中央;
        フォントサイズ: 30px;
        下マージン: 10px;
    }

    ＃左{
        幅: 100%;
        行の高さ: 150px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
        下マージン: 10px;
    }

    ＃中心{
        幅: 100%;
        行の高さ: 300px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
    }

    ＃右{
        幅: 100%;
        行の高さ: 150px;
        テキスト配置: 中央;
        背景: #333;
        フロート: 左;
        フォントサイズ: 30px;
        色: #fff;
        上マージン: 10px;
    }

    #フッター{
        幅: 100%;
        高さ: 200px;
        背景: #333;
        色: #fff;
        行の高さ: 200px;
        フォントサイズ: 30px;
        テキスト配置: 中央;
        フロート: 左;
        上マージン: 10px;
    }
}

@media screen と (限定されたスコープ) を使用して、Web ページのレイアウトを制御します。例:

min-width は最小値を表し、max-width は最大値を表します。

パソコン