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 プロトタイプとプロトタイプチェーンの詳細

推薦する

WeChatアプレットは写真の撮影とアルバムからの写真の選択を実現します

この記事では、WeChatアプレットで写真を撮ったり、アルバムから写真を選択したりするための具体的な...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」

プロジェクトで使用されている特殊文字とアイコンHTMLコードXML/HTML コードコンテンツをクリ...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...

mysqlとnavicat間の接続を確立する際の1251エラーを解決する

コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか？ それともデザイン重視にすればい...

インタラクションデザインと心理学の驚くべきつながり18選

デザイナーは心理学を理解する必要があるデザイナーが知るべき心理学という本は非常に興味深いです。まず、...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

MySQL マルチバージョン同時実行制御 MVCC の実装

目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...

MySQL マルチテーブルクエリの詳細な説明

いつも、気づかないうちに時間というのは驚くほど早く過ぎていきます。小暑が過ぎ、中暑に突入しました。太...

react-beautiful-dnd を使用してリスト間のドラッグ アンド ドロップを実装する

目次react-beautiful-dndを選ぶ理由基本的な使い方基本概念使い方使用中に発生した問題...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード

目次コンポーネントインフラストラクチャ目的: 画像拡大鏡機能を実現するvueuseをインストールする...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...