序文 最近は、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 の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)
目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...
1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...
この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...
フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...
この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...
apache: ポートに基づいて仮想ホストを作成する仮想ホスト(a、b、c)の作成を例に挙げます1)...
目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...
インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...
HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...