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

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>

CS

*{
    マージン: 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 は最大値を表します。

パソコン

パッドエンド

電話

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  WeChatミニプログラムが星評価を実装

>>:  HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

推薦する

Javascriptのtry catchの2つの機能についてお話しましょう

プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...

リンクをクリックしたときにファイルのダウンロードダイアログボックスをポップアップ表示するには、HTML で href を使用します。

今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...

Baota LinuxパネルにFTP接続できない問題の解決方法の詳細な説明

Alibaba Cloud Server を使用している場合は、セキュリティ グループ設定でポート ...

ドロップダウンリストのJavaScript実装

この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

Vueは時間カウントダウン機能を実装する

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...

Linux calコマンドの使用

1. コマンドの紹介cal (カレンダー) コマンドは、現在の日付または指定された日付のグレゴリオ暦...

MySQLの外部ネットワークアクセス権を開く方法

以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

MySQL 百万レベルのデータページングクエリ最適化ソリューション

データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...

MySQL データをエクスポートする際の secure-file-priv 問題の解決方法

エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...

「fsck」を使用して Linux のファイルシステムエラーを修正する方法

序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...