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 フォームを使用する方法

推薦する

Vue プロジェクトで addRoutes を使用する際の問題の解決策

目次序文1. 404 ページ1. 原因2. 解決策2.白い画面を更新する1. 原因2. 解決策3. ...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...

Linux ncコマンドの概要

NC のフルネームは Netcat (Network Knife) で、作成者は Hobbit &a...

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...

IOSデータベースアップグレードデータ移行の詳細な例

IOSデータベースアップグレードデータ移行の詳細な例まとめ：昔、データベースのバージョン アップグレ...

.htaccess を使用して特定の IP からの Web サイトへのアクセスを禁止する方法

序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...

MySQL でのトリガーとカーソルの紹介と使用

トリガーの紹介トリガーは、テーブルに関連付けられた特別なストアド プロシージャであり、テーブル内のデ...

Tomcatのクラスロードメカニズムを説明する記事

目次- 序文 - - JVM クラスローダー - 1. JVMクラスローダー2. クラスローダーのソ...

Vueプロジェクトでスケルトンスクリーンを使用する方法

現在、アプリケーション開発は基本的にフロントエンドとバックエンドに分離されています。主流のフロントエ...

Vueは視覚的なドラッグページエディタを実装します

目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...

Linuxのテキスト処理コマンドsortの詳細な説明

テキストファイルの内容を並べ替える使用方法: ソート + オプション + ファイル名 (複数のファイ...

レム適応の一般的なパッケージ3つについて

序文以前、rem適応についての記事を書きましたが、具体的なパッケージは紹介しませんでした。今日は、よ...

自動同期テーブル構造のMySql開発

開発の問題点開発プロセスでは、データベース フィールドが頻繁に変更されるため、RD 環境と QA 環...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...