CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装する

レスポンシブレイアウトは非常にハイエンドで難しいように思えますが、実際にはCSSのみを使用してレスポンシブレイアウトを実現できます。

使用する必要があるのは、CSS の非接続クエリです。使用方法は次のとおりです。

@media の 3 つの使い方

1. CSS ファイルで直接使用します。

@media type and (条件 1) and (条件 2) {
    CSSスタイル}
@media スクリーンと (max-width:1024px) {
    体{
        背景色: 赤;
    }
}

2. @importを使用してインポートする

@import url("css/moxie.css") すべておよび (max-width:980px);

3. これは最も一般的に使用される方法です。リンク接続を直接使用し、メディア属性を使用してクエリメソッドを設定します。

<link rel="stylesheet" type="text/css" href="css/moxie.css" media="all and (max-width=980px)"/>

以下は、シンプルなレスポンシブ レイアウトの HTML コードです。

<!doctypehtml>
<html>
<ヘッド>
    <メタ文字セット="utf-8"/>
    <title>レスポンシブ</title>
    <link rel="スタイルシート" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<本文>
    <div class="header">ヘッダー</div>
    <div class="main クリアフィックス">
        <div class="left">左</div>
        <div class="center">中央</div>
        <div class="right">右</div>
    </div>
    <div class="footer">下</div>
</本文>
</html>

CSS スタイルは次のとおりです。

*{
    マージン:0;
    パディング:0;
    テキスト配置:中央;
    色：黄色; 
}

。ヘッダ{
    幅:100%;
    高さ:100px;
    背景:#ccc;
    行の高さ:100px;
}
。主要{
    背景：緑;
    幅:100%;
}
.clearfix:後{
    表示:ブロック;
    高さ:0;
    コンテンツ："";
    可視性:非表示;
    クリア:両方;
}
.左、.中央、.右{
    フロート:左;
}
。左{
    幅:20%;
    背景:#112993;
    高さ:300px;
    フォントサイズ:50px;
    行の高さ:300px;
}
。中心{
    幅:60%;
    背景:#ff0;
    高さ:400px;
    色:#fff;
    フォントサイズ:50px;
    行の高さ:400px;
}
。右{
    幅:20%;
    背景:#f0f;
    高さ:300px;
    フォントサイズ:50px;
    行の高さ:300px;
}
.フッター{
    幅:100%;
    高さ:50px;
    背景:#000;
    行の高さ:50px;
}

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>スタイルコード

。右{
    フロート:なし;
    幅:100%;
    背景:#f0f;
    クリア:両方;
}
。左{
    幅:30%;
}
。中心{
    幅:70%;
}
。主要{
    高さ:800px;
}

<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>スタイルコード

.左、.中央、.右{
    フロート:なし;
    幅:100%;
}

ウィンドウが 1024 ピクセルより大きい場合、コマンドは圧縮され、他の変更は発生しません。

ウィンドウが 1024 ピクセルより小さく、720 ピクセルより大きい場合、右側のバーはフローティングを停止し、以下のように表示されます。

ウィンドウが 720 ピクセルより小さい場合、左、中央、右の列はすべてフロート解除され、幅は 100% になります。

レイアウトはとてもシンプルですが、詳細を把握するには継続的な練習が必要です。継続的な更新、皆様のアドバイスを歓迎します

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

<<:  W3C チュートリアル (3): W3C HTML アクティビティ

>>:  JavaScript プロトタイプとプロトタイプチェーンの詳細

推薦する

MySqlサブクエリINの実装と最適化

目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...

テーブル切り替えのための JavaScript プラグインのカプセル化

この記事では、テーブル切り替えプラグインを実装するためのJavaScriptのカプセル化コードを参考...

jQuery カスタム虫眼鏡効果

この記事の例では、jQueryのカスタム虫眼鏡効果の具体的なコードを参考までに共有しています。具体的...

Windows での MySQL 8.X インストール チュートリアル

以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...

VirtualBox CentOS7.7.1908 Python3.8 ビルド Scrapy 開発環境 [グラフィックチュートリアル]

目次環境CentOSをインストールするyum 国内ミラーソースを構成するサードパーティの依存関係をイ...

MySQL でのフィルター条件なしのカウントの詳細な説明

カウント（*）成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...

Docker Composeオーケストレーションツールの詳細な説明

Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

favicon.ico についていくつか注意点があります (ルートディレクトリに置くのがベストです)

任意のウェブページを開きます。例: http://www.baidu.com/ ブラウザのタブのヘッ...

MySQL 実践演習 シンプルなライブラリ管理システム

目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...

Centos7.2 で mysql5.7 データベースをインストールするための詳細な手順

サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...