CSS3 メディアクエリ レスポンシブレイアウト ブートストラップフレームワークの原則と実践の詳細な説明 (推奨)

CSS3 メディアクエリ レスポンシブレイアウト ブートストラップフレームワークの原則と実践の詳細な説明 (推奨)

メディアデバイスタイプの使用法の詳細な説明:

<!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-b​​g">登録</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-b​​g{
            背景:#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 をよろしくお願いいたします。

<<:  Vue の 4 つのカスタム命令の説明と使用例

>>:  複数の例で HTML フォームを使用する方法

推薦する

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

JSONデータをHTMLで表示する方法

背景：場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...

ノードイベントループとメッセージキューの分析

目次非同期とは何ですか?なぜ非同期性が必要なのでしょうか?非同期IOとは何ですか?イベントループとは...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

MySQLサーバのスレッド数を表示する方法の詳細な説明

この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...

CocosCreator スケルトンアニメーション ドラゴンボーン

CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...

mysql での rpm インストールの詳細な説明

インストールとアンインストールの表示 # rpm -qa | grep mysql を表示 # アン...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...

MySQL 最適化戦略 (推奨)

要約すれば： 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...

Tomcat マルチレイヤーコンテナの設計に関する簡単な説明

目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...

MySQLの分離レベルとロックメカニズムの詳細な説明

目次簡単な説明: 1. 取引の4つの特徴2. 複数の同時トランザクションによって発生する問題3. ト...

インターフェースなしで Centos7 に JDK と Tomcat をデプロイするチュートリアル

1. xshell6をインストールする2. サーバー接続を作成し、ユーザー名とパスワードを入力します...

Manjaro インストール CUDA 実装チュートリアル分析

昨年末、Thinkpad T450 のデュアルシステムの opensuse を Manjaro に置...

JavaScript イベントの概念の詳細な説明 (静的登録と動的登録の区別)

目次js のイベントイベントタイプ一般的なイベントイベント登録静的および動的登録の例onload 読...