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 プロトタイプとプロトタイプチェーンの詳細
推薦する
Vueは画像のドラッグアンドドロップ機能を実装します
この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...
MySQL の CPU 負荷が高い問題のトラブルシューティング
MySQL による CPU 負荷の上昇今日の午後、MySQL によってサーバーの負荷が高くなる問題を...
Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]
1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...
Bootstrap が人気な 11 の理由
序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...
雨滴効果を実現する JavaScript キャンバス
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
MySQL における ESCAPE キーワードの使用法の詳細な説明
MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...
MySQL交換パーティションの詳細な例
MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...
Alibaba Cloud Nginx はドメイン名アクセス プロジェクトを実装するために https を設定します (グラフィック チュートリアル)
ステップ1: サードパーティの信頼できるSSL証明書に署名するAlibaba Cloud で直接、無...
Linux 仮想マシンの IP アドレスを変更し、ゲートウェイを確認し、ネットワーク環境を構成する方法に関するチュートリアル
仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...
PHP の問題により、Zabbix モニタリングでグラフィカル インターフェイスに中国語の文字化けが発生する問題を解決する方法
PHP のコンパイル時に -enable-gd-jis-conv オプションを追加することで発生する...
ウェブページ（ウェブサイト）のデザインと制作に関する考えや経験の共有
まずは投稿する前に！ 「I Want to Study on My Own!」に改めて感謝します。た...
CSSクラス名の問題の詳細な説明
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成
1eChartsの基本手順4つのステップ1 DOMコンテナを見つける2 初期化3 設定オプション4 ...
WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します
目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...
MySQL 整合性制約の例の詳細な説明
この記事では、MySQL の整合性制約について説明します。ご参考までに、詳細は以下の通りです。メイン...