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;
}

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

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

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

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

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

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

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

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

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

HTML 5.1 学習: 14 の新機能とアプリケーション例

ブログ

MySQL カーソルの原理と使用例の分析

ブログ

ローカルサーバーを構築するためのwebpack-dev-serverの実装

ブログ

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

ブログ

MySql で正規表現クエリを使用する方法

ブログ

Vue でルートをジャンプする方法をご存知ですか?

ブログ

VMware Workstation 15 Pro インストールガイド (初心者向け)

ブログ

Vue大画面表示適応方法

ブログ

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

ブログ

Windows サーバーポートを開きます (例としてポート 8080 を使用します)

ブログ

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

HTML 5.1 学習: 14 の新機能とアプリケーション例

MySQL カーソルの原理と使用例の分析

ローカルサーバーを構築するためのwebpack-dev-serverの実装

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

MySql で正規表現クエリを使用する方法

Vue でルートをジャンプする方法をご存知ですか?

VMware Workstation 15 Pro インストールガイド (初心者向け)

Vue大画面表示適応方法

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

Windows サーバーポートを開きます (例としてポート 8080 を使用します)

推薦する

JavaScript 履歴オブジェクトの説明

Navicat Premium が MySQL 8.0 に接続してエラー「1251」を報告する問題を解決する方法の分析

LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

タグ li はブロックレベル要素ですか?

VMware Workstation 14 Pro（仮想マシン）にシステムをインストールする方法の詳細な説明

Ubuntu システムに Theano と Keras をインストールする方法

Bootstrap3.0 学習ノートテーブル関連

Mysqlツリー再帰クエリの実装方法

Docker Compose は MySQL に接続するために SpringBoot プロジェクトをデプロイしますが、そこで遭遇する落とし穴があります。

CSS3 の新しいレイアウト: flex の詳細な説明

Linux システムで Centos7 を使って ElasticSearch ミドルウェアと共通インターフェースを構築するデモ

Vue3 トランジションアニメーションの落とし穴記録について

ウェブレスポンシブレイアウトにおけるiframe適応の方法

あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

MySQL は ACID トランザクションをどのように実装しますか?