メディアデバイスタイプの使用法の詳細な説明: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- スクリーンデバイス --> <スタイル メディア="スクリーン"> h1{ 色:赤; } </スタイル> <!-- プリンターデバイス --> <スタイル メディア="print"> h1{ 色:緑; } </スタイル> <!-- スクリーンデバイスとプリンターデバイス --> <スタイル メディア="screen,print"> h1{ フォントの太さ:通常; } </スタイル> </head> <本文> <h1>cyy</h1> </本文> </html> リンク タグを使用してメディア タイプを設定します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- デフォルトのメディアはすべて、すべてのデバイスです --> <link rel="スタイルシート" href="css/commob.css" media="all"> <link rel="スタイルシート" href="css/screen.css" media="screen"> <link rel="スタイルシート" href="css/print.css" media="印刷"> </head> <本文> <h1>cyy</h1> </本文> </html> ページの複数ファイル参照を簡素化するには、@import を使用します。 推奨されるアプローチは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="スタイルシート" href="css/style.css"> </head> <本文> <h1>cyy</h1> </本文> </html> スタイル.css url をインポートします。 @import url(screen.css) スクリーン; @import url(print.css) 印刷; クエリへの応答を定義するには、スタイルシートで @media 部分を使用します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="スタイルシート" href="css/style.css"> </head> <本文> <div class="navbar"> <a href="">cyy</a> <ul> <li>cyy1</li> <li>cyy2</li> <li>cyy3</li> </ul> </div> </本文> </html> 関連度が低い .navbar{ 高さ:60px; 幅:900ピクセル; ディスプレイ:フレックス; アイテムを中央揃えにします。 背景:#f3f3f3; マージン:0 自動; ul{ リストスタイル:なし; ディスプレイ:フレックス; } } @media スクリーンと (max-width:600px) { .navbar{ ul{ 表示:なし; } } } 条件判断応答アプリケーション: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style media="screen かつ (最小幅:768px) かつ (最大幅:1000px)"> h1{ 色:赤; } </スタイル> <style media="screen and (max-width:768px)"> h1{ 色:青; } </スタイル> </head> <本文> <h1>CYY</h1> </本文> </html> 論理的に、またはトリックを使用して操作します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- デバイスが横向きの場合、または縦向きか横向きかに関係なくデバイスの幅が 768 ピクセルより大きい場合 --> <style media="screen and (orientation:landscape),screen and (min-width:768px)"> h1{ 色:赤; } </スタイル> </head> <本文> <h1>CYY</h1> </本文> </html> not キーワードを使用する際の注意点: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <スタイル> /* 条件が満たされた場合、スタイルは適用されません */ @media は画面ではなく (min-width:500px) かつ (max-width:768px) { h1{ 色:赤; } } </スタイル> </head> <本文> <h1>CYY</h1> </本文> </html> 低スペックのブラウザを除外する場合にのみ使用してください: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <スタイル> /* 追加後、低スペックのブラウザはこの構文を無視します*/ @media 画面のみで (min-width:500px) { h1{ 色:赤; } } </スタイル> </head> <本文> <h1>CYY</h1> </本文> </html> 実際のケース操作のファイル構造: html <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <meta name="viewport" content="width=デバイス幅、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> <link rel="スタイルシート" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="スタイルシート" href="css/style.css"> </head> <本文> <ヘッダークラス="mb-2"> <div class="コンテナ"> <div class="navbar"> <a href="" class="logo">CYY</a> <label for="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label> <input type="checkbox" name="" id="toggle-nav"> <div class="collapse"> <ul class="links"> <li><a href="">システム学習</a></li> <li><a href="">実践コース</a></li> <li><a href="">トピックディスカッション</a></li> <li><a href="">サインインしてカードに記入</a></li> </ul> <div class="form"> <a href="">ログイン</a> <a href="" class="form-bg">登録</a> </div> </div> </div> </div> </ヘッダー> <div class="コンテナ"> <div class="row"> <div class="col-6 col-lg-9 col-xs-12"> <div class="カード"> <div class="カードヘッダー"> <h2>最新のアップデート</h2> </div> <div class="カード本体"> <ul class="リストグループ"> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> <li> <a href="">cyy はレスポンシブ レイアウトの学習を始めました</a> 2020-11-13 </li> </ul> </div> <div class="カードフッター"> <div class="page"> <a href=""><</a> <a href="">1</a> <a href="">2</a> <a href="" class="current">3</a> <a href="">4</a> <a href="">5</a> <a href="">></a> </div> </div> </div> </div> <div class="col-6 col-lg-3 col-xs-12"> <div class="カード"> <div class="カードヘッダー"> <h3>コミュニティ投稿</h3> </div> <div class="card-body"></div> <div class="カードフッター"></div> </div> </div> </div> </div> </本文> </html> 統一されたコントロールスタイル.cssを導入する url をインポートします。 @import url(navbar.css); url をインポートします(card.css); url をインポートします(title.css); url をインポートします。 url をインポートします(margin.css); @import url(リストグループ.css); @import url(small-x.css) 画面のみおよび (max-width:768px); @import url(small.css) 画面のみおよび (min-width:768px); @import url(medium.css) 画面のみおよび (min-width:960px); @import url(big.css) 画面のみおよび (min-width:1200px); ナビゲーション コンポーネント navbar.less ヘッダ{ ボーダー下部:5px 実線 #009688; ボックスの影:0 5px 5px rgba(0,0,0,.2); .navbar{ ディスプレイ:フレックス; パディング:1rem 0; アイテムを中央揃えにします。 。ロゴ{ 色:#009688; 右マージン:20px; フォントの太さ:太字; フォントサイズ:1.3rem; &+ラベル{ 表示:なし; &+入力{ 表示:なし; } } } 。崩壊{ ディスプレイ:フレックス; フレックス成長:1; .links{ ディスプレイ:フレックス; // 残りのスペースを埋めます margin-right:auto; li{ マージン:0 10px; { 色:#777; &:ホバー{ 色:#333; フォントの太さ:太字; } } } } 。形状{ { 境界線:1px 実線 #009688; 色:#009688; パディング:.3rem 1rem; 境界線の半径:.3rem; &.form-bg{ 背景:#009688; 色:白; } } } } } } @media スクリーンと (最大幅:960px) { ヘッダ{ .navbar{ // flex-flow プロパティは、flex-direction プロパティと flex-wrap プロパティの複合プロパティです。 flex-flow:行折り返し; 。ロゴ{ 右マージン:自動; &+ラベル{ 表示:ブロック; 境界線:1px実線 #ddd; パディング:.5rem 1rem; 色:#555; カーソル:ポインタ; &+入力{ 表示:なし; } &+入力:チェック済み{ &+.collapse{ 表示:ブロック; } } } } 。崩壊{ 表示:なし; フレックスフロー:列; 幅:100%; .links{ flex-direction:列; マージン下部:1.5rem; li{ マージン:.5rem 0; } } } } } } カードコンポーネント card.less 。カード{ 境界線:1px実線 #ddd; ボックスの影:0 0 5px rgba(0,0,0,.1); 境界線の半径:.2rem; .カードヘッダー{ パディング:.5rem 1rem; border-bottom:1px 実線 #ddd; } .カード本体{ パディング:1rem; } .カードフッター{ パディング:.5rem 1rem; border-top:1px 実線 #ddd; } } テキストコンポーネント title.less h2 { フォントサイズ: 1rem; } h3 { フォントサイズ: 0.8rem; } h2, h3, h4 { 色: #555; } ページネーションコンポーネント page.less 。ページ{ ディスプレイ:フレックス; { 表示:ブロック; パディング:.3rem .8rem; 境界線:1px実線 #ddd; // 重なり合う 2 つの境界線を重ねます margin-left:-1px; 色:#555; &:最初の子{ 左上の境界線の半径:.3rem; 境界線の左下の半径:.3rem; } &:最後の子{ 境界線の右上の半径:.3rem; 境界線の右下の半径:.3rem; } &。現在{ 背景:#009688; 色:白; 境界線:1px 実線 #009688; } } } マージンコンポーネント margin.less .mb-1 { マージン下部: 1rem; } .mb-2 { マージン下部: 2rem; } .mb-3 { マージン下部: 3rem; } リストコンポーネント list-group.less .リストグループ{ li{ ディスプレイ:フレックス; コンテンツの両端揃え:スペースの間; パディング:.8rem 0; border-bottom:1px 実線 #ddd; フォントサイズ:.9rem; &:最後の子{ 境界線下部:なし; } { 色:#777; } スパン{ 色:#888; フォントサイズ:.6rem; } } } 超小型画面向けの Small-x.less 体 { 背景: 白; } 。容器 { 幅: 95%; マージン: 0 自動; } .col-xs-12 { グリッド列: スパン 12; } .col-xs-11 { グリッド列: スパン 11; } .col-xs-10 { グリッド列: スパン 10; } .col-xs-9 { グリッド列: スパン 9; } .col-xs-8 { グリッド列: スパン 8; } .col-xs-7 { グリッド列: スパン 7; } .col-xs-6 { グリッド列: スパン 6; } .col-xs-5 { グリッド列: スパン 5; } .col-xs-4 { グリッド列: スパン 4; } .col-xs-3 { グリッド列: スパン 3; } .col-xs-2 { グリッド列: スパン 2; } .col-xs-1 { グリッド列: スパン 1; } 小型スクリーン対応small.less 体{ 背景:白; } 。容器{ 幅:750ピクセル; マージン:0 自動; } .col-sm-12{ グリッド列:スパン 12; } .col-sm-11{ グリッド列:スパン 11; } .col-sm-10{ グリッド列:スパン 10; } .col-sm-9{ グリッド列:スパン 9; } .col-sm-8{ グリッド列:スパン 8; } .col-sm-7{ グリッド列:スパン 7; } .col-sm-6{ グリッド列:スパン 6; } .col-sm-5{ グリッド列:スパン 5; } .col-sm-4{ グリッド列:スパン 4; } .col-sm-3{ グリッド列:スパン 3; } .col-sm-2{ グリッド列:スパン 2; } .col-sm-1{ グリッド列:スパン 1; } 中画面適応 medium.less 体{ 背景:白; } 。容器{ 幅:950ピクセル; マージン:0 自動; } .col-md-12{ グリッド列:スパン 12; } .col-md-11{ グリッド列:スパン 11; } .col-md-10{ グリッド列:スパン 10; } .col-md-9{ グリッド列:スパン 9; } .col-md-8{ グリッド列:スパン 8; } .col-md-7{ グリッド列:スパン 7; } .col-md-6{ グリッド列:スパン 6; } .col-md-5{ グリッド列:スパン 5; } .col-md-4{ グリッド列:スパン 4; } .col-md-3{ グリッド列:スパン 3; } .col-md-2{ グリッド列:スパン 2; } .col-md-1{ グリッド列:スパン 1; } 大画面用のBig.less 体{ 背景:透明; } 。容器{ 幅:1180ピクセル; マージン:0 自動; } .col-lg-12{ グリッド列:スパン 12; } .col-lg-11{ グリッド列:スパン 11; } .col-lg-10{ グリッド列:スパン 10; } .col-lg-9{ グリッド列:スパン 9; } .col-lg-8{ グリッド列:スパン 8; } .col-lg-7{ グリッド列:スパン 7; } .col-lg-6{ グリッド列:スパン 6; } .col-lg-5{ グリッド列:スパン 5; } .col-lg-4{ グリッド列:スパン 4; } .col-lg-3{ グリッド列:スパン 3; } .col-lg-2{ グリッド列:スパン 2; } .col-lg-1{ グリッド列:スパン 1; } レンダリング rem単位を使用してサイズの応答性を操作する 自動ビルド ツール プラグインを使用することをお勧めします。 これで、CSS3 メディア クエリ レスポンシブ レイアウト ブートストラップ フレームワークの原理と実践の詳細な説明に関するこの記事は終了です。CSS レスポンシブ レイアウト ブートストラップ フレームワークの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...
この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...
これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...
目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...
ルーティングvue-router4 では API の大部分は変更されていないため、変更点のみに焦点を...
目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...
序文MySQL では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...
誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...
効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...
最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...
HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...
1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...
フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...