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

推薦する

MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

MySQL インポート csv エラーの 4 つの解決策

これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1：地元のせいエラー：エラー 39...

elementui での el-cascader カスケードセレクタの実践

目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...

Vue3ルーティングVueRouter4を使用する簡単な例

ルーティングvue-router4 では API の大部分は変更されていないため、変更点のみに焦点を...

Vue3 トランジションアニメーションの落とし穴記録について

目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...

MySQL でインデックス構造として B+ ツリーを使用する利点は何ですか?

序文MySQL では、Innodb と MyIsam の両方がインデックス構造として B+ ツリーを...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...

クールな点滅アラームボタンをおすすめします

効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するた...

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...

Linux で ARM 開発ボード用のファイルシステムを作成する

1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...

HTTP 戻りコード一覧（中国語と英語の説明）

httpリターンコードリスト（以下は概要です）詳細な中国語の説明についてはここをクリックしてくださ...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

HTML で複数のフォームのテキスト ボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...