序文
最近、会社はさまざまなデバイスに適応するために独自の公式 Web サイトを開発する必要があるため、それを実現するために Bootstrap フレームワークを使用することを考えました。レスポンシブ レイアウトの実装の本質はレスポンシブ グリッド システムであるため、使用する必要があるのはレスポンシブ グリッド システムだけです。グリッド システムのブートストラップ全体を導入する必要はありません。
Bootstrap の公式 Web サイトからソース コードをダウンロードして、Bootstrap のグリッド システムの実装を表示します。最下層は、実際には、応答ブレークポイント+グリッド レイアウト+応答性適応を組み合わせた一連の応答性ソリューションです。次に、独自の応答性を実装してみましょうプロジェクト内のグリッド システム。
1. 応答ブレークポイント
さまざまな画面サイズにさまざまなスタイルを設定する必要がある場合、どの画面サイズに対応する必要があるかを知る必要があります。これらの異なる画面サイズは、レスポンシブ ブレークポイント (しきい値) と呼ばれます。
| 画面サイズ | グリッドレイアウトでのクラス名の区別 | ブレークポイント (しきい値) |
|---|---|---|
| 極小画面（極小） | <576ピクセル | |
| 小画面（スモール） | -sm | 576px ~ 768px (両端を含む) |
| 中画面 | -md | 768px ~ 992px (両端を含む) |
| 大画面（ラージ） | -lg | 992px ~ 1200px (両端を含む) |
| ×ラージ | -xl | 1200px ~ 1400px (両端を含む) |
| 特大画面 (XX-Large) | -xxl | >1400ピクセル |
上記のブレークポイントはブートストラップ フレームワークの内部ブレークポイントであり、開発標準の参照として使用できます。
次に、メディア クエリを使用してブレークポイントを設定し、さまざまな画面サイズにさまざまな背景色を表示します。
<style>
/* 当屏幕宽小于576px时，以下代码生效 */
body {
background-color: #d2b9b9;
}
/* 当屏幕宽大于等于576px，小于768px时，以下代码生效 */
@media screen and (min-width: 576px) {
body {
background-color: #d9d5bc;
}
}
/* 当屏幕宽大于等于768px，小于992px时，以下代码生效 */
@media screen and (min-width: 768px) {
body {
background-color: #aed8ea;
}
}
/* 当屏幕宽大于等于992px，小于1200px时，以下代码生效 */
@media screen and (min-width: 992px) {
body {
background-color: #4ce04c;
}
}
/* 当屏幕宽大于等于1200px时，以下代码生效 */
@media screen and (min-width: 1200px) {
body {
background-color: #14736d;
}
}
</style>メディア クエリについては、ここでは多くは言いません。メディア クエリのコードは、スタイル タグまたは別の CSS ファイルに記述することができますが、メディア クエリを実行できるように、すべての CSS スタイル コードの後に記述する必要があることに注意してください。ブレークポイントが有効な場合、メディア クエリに記述されたコードが有効になり、通常のスタイルによって上書きされません。
2. グリッドレイアウト
いわゆるグリッド レイアウトは、ページまたはコンテナー (div など) がいくつの部分に分割されるかとして理解でき、ページまたはコンテナーに対応する数のサブ異なるコピーの比率は次のとおりです。
| 部数 | 総コピー数の % |
| 1 | 8.33333333% |
| 2 | 16.6666667% |
| 3 | 25% |
| 4 | 33.33333333% |
| 5 | 41.66666667% |
| 6 | 50% |
| 7 | 58.33333333% |
| 8 | 66.6666667% |
| 9 | 75% |
| 10 | 83.33333333% |
| 11 | 91.66666667% |
| 12 | 100% |
例: グリッド レイアウトを使用して、6 列、3 列、2 列、および 1 列の行レイアウトを実現します。
<style>
html,
body {
margin: 0;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
box-sizing: border-box;
height: 100px;
border: 1px solid red;
margin-top: 10px;
}
/* 不同份数，所占的宽 */
.width-1 {
width: 8.33333333%;
}
.width-2 {
width: 16.66666667%;
}
.width-3 {
width: 25%;
}
.width-4 {
width: 33.33333333%;
}
.width-5 {
width: 41.66666667%;
}
.width-6 {
width: 50%;
}
.width-7 {
width: 58.33333333%;
}
.width-8 {
width: 66.6666667%;
}
.width-9 {
width: 75%;
}
.width-10 {
width: 83.33333333%;
}
.width-11 {
width: 91.66666667%;
}
.width-12 {
width: 100%;
}
</style>
<body>
<div class="row">
<!-- 一行6列 -->
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<!-- 一行3列 -->
<div class="col width-4"></div>
<div class="col width-4"></div>
<div class="col width-4"></div>
<!-- 一行2列 -->
<div class="col width-6"></div>
<div class="col width-6"></div>
<!-- 一行1列 -->
<div class="col width-12"></div>
</div>
</body>効果は次のとおりです。
3. 応答適応スキーム
レスポンシブ ブレークポイント + グリッド レイアウトについては上で紹介しましたが、次に要件に応じてレスポンシブ適応スキームを決定する必要があります。開発には一般に 2 つのタイプがあります。
1. PC 側の優先適応方式のコード シーケンスは次のとおりです(PC 側が最初に考慮され、モバイル側が最後に考慮されます)。
/* ....这里的css样式，会在屏幕宽大于1200px时生效.... */
.....css样式.....
/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
@media screen and (max-width: 1200px) {
}
/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
@media screen and (max-width: 992px) {
}
/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
@media screen and (max-width: 768px) {
}
/* 当屏幕宽度小于等于576px时，显示如下样式 */
@media screen and (max-width: 576px) {
}2. 移動端末の優先適応方式のコード順序は次のとおりです（移動端末が最初に考慮され、PC 端末が最後に考慮されます）。
/* 当屏幕宽度小于576px,显示以上样式 */
...css样式....
/* 当屏幕宽度大于等于576px, 同时小于768px时，显示以下样式 */
@media screen and (min-width: 576px) {
}
/* 当屏幕宽度大于等于768px, 同时小于992px时，显示以下样式 */
@media screen and (min-width: 768px) {
}
/* 当屏幕宽度大于等于992px, 同时小于1200px时，显示以下样式 */
@media screen and (min-width: 992px) {
}
/* 当屏幕宽度大于等于1200px，显示以下样式 */
@media screen and (min-width: 1200px) {
}4. レスポンシブページの開発
レスポンシブ ブレークポイント + グリッド レイアウト + レスポンシブ アダプテーション に従って、レスポンシブ グリッド システムを実装します。ここでは、必要に応じて PC 側を優先するレスポンシブ アダプテーション スキームを選択します。
プロジェクトに新しい media.css ファイルを作成します。コードは次のとおりです。
/* 大于1200px的样式写在这里 */
.col-xlg-1 {
width: 8.33333333%;
}
.col-xlg-2 {
width: 16.6666667%;
}
.col-xlg-3 {
width: 25%;
}
.col-xlg-4 {
width: 33.33333333%;
}
.col-xlg-5 {
width: 41.66666667%;
}
.col-xlg-6 {
width: 50%;
}
.col-xlg-7 {
width: 58.33333333%;
}
.col-xlg-8 {
width: 66.6666667%;
}
.col-xlg-9 {
width: 75%;
}
.col-xlg-10 {
width: 83.33333333%;
}
.col-xlg-11 {
width: 91.66666667%;
}
.col-xlg-12 {
width: 100%;
}
/* 屏幕宽 > 992px，同时 <= 1200px时，样式写在这里 */
@media screen and (max-width: 1200px) {
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-2 {
width: 16.6666667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-8 {
width: 66.6666667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-12 {
width: 100%;
}
}
/* 屏幕宽 > 768px，同时 <= 992px时，样式写在这里 */
@media screen and (max-width: 992px) {
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.6666667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-8 {
width: 66.6666667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-12 {
width: 100%;
}
}
/* 屏幕宽 > 766px，同时 <= 768px时，样式写在这里 */
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {
width: 16.6666667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-8 {
width: 66.6666667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-12 {
width: 100%;
}
}
/* 屏幕宽 <= 576px样式写在这里 */
@media screen and (max-width: 576px) {
.col-1 {
width: 8.33333333%;
}
.col-2 {
width: 16.6666667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333%;
}
.col-5 {
width: 41.66666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333333%;
}
.col-8 {
width: 66.6666667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333%;
}
.col-11 {
width: 91.66666667%;
}
.col-12 {
width: 100%;
}
}
HTML での導入と使用:
<!-- 栅格系统的代码样式在media.css文件中-->
<link rel="stylesheet" href="./css/media.css" />
<style>
html,
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: 1px solid red;
margin: 10px 0;
min-height: 100px;
}
</style>
<body>
<div class="row">
<!-- 屏幕宽 大于1200px时 一行4列 -->
<!-- 屏幕宽 <= 992px时 一行2列 -->
<!-- 屏幕宽 <= 576px时 一行1列 -->
<div class="col col-xlg-3 col-lg-6 col-sm-12">1</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">2</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">3</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">4</div>
</div>
</body>要約する
このようにして、シンプルなバージョンのレスポンシブ グリッド システムが実現され、実際の開発では、ニーズに応じてレスポンス ブレークポイントをカスタマイズし、さまざまな画面やデバイスへの適応効果をより適切に実現できます。
推奨読書
Print.jsはPDF、HTML、画像の印刷を実現します（スタイルの設定とページングが可能）
Pinia とデータ永続ストレージをすぐに理解する (詳細なチュートリアル)
Nginx がフロントエンドの静的 Web サイトを展開する詳細な教育 (ステップバイステップ)