序文 最近は、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 を応援していただければ幸いです。 |
>>: HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)
プログラムは上から下へ順番に実行され、いくつかの制御文によって実行経路を変更することができます。制御...
今日、新しい技を学びました。あまりやったことがなかったので、今まで知りませんでした...目的: リン...
Alibaba Cloud Server を使用している場合は、セキュリティ グループ設定でポート ...
この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...
目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...
SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...
1. コマンドの紹介cal (カレンダー) コマンドは、現在の日付または指定された日付のグレゴリオ暦...
以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...
データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...
エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...
序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...