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 の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

推薦する

MySQLの主キーと外部キーの使用と説明を簡単に説明します

目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

Vue で rem 適応を使用する方法

1. 開発環境vue 2. コンピュータシステム Windows 10 Professional E...

MySQL インデックスの原理と使用例の分析

この記事では、例を使用して MySQL インデックスの原理と使用方法を説明します。ご参考までに、詳細...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

Apache ポートに基づいて仮想ホストを作成する例

apache: ポートに基づいて仮想ホストを作成する仮想ホスト(a、b、c)の作成を例に挙げます1)...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

フロントエンドの状態管理(パート2)

目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...

よくある MySQL 設計エラーをご存知ですか?

インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...