ブートストラップ アダプティブとは

ブートストラップでは、アダプティブとは、画面サイズに応じてデバイスを超小型画面、中画面、中画面、大画面の 4 つのタイプに分割し、Web ページを 12 列に分割することを指します。さまざまなデバイスの画面では、ブラウザを行と列に分割して自己適応を実現します。画面がどれほど大きくても、自己適応では行の折り返しは行われず、水平方向にのみ拡大縮小されます。

このチュートリアルの動作環境: Windows10 システム、bootstrap5 バージョン、DELL G3 コンピューター

bootstrapadaptive とは

bootstrapadaptive:

Bootstrap は、画面サイズに応じてデバイスを超小型画面、小型画面、中画面、大型画面の 4 つのタイプに分割し、画面を 12 列に分割します

対応する画面幅:

• 超小型画面 (携帯電話): 0-768px 対応する設定 class=col-xs-number

• 小画面 (タブレット): 768-992px 対応する設定 class=col-sm-number

• 中画面 (コンピュータ): 992-1200px 対応する設定 class=col -md-number

• 大画面 (コンピュータ): 1200px-? 対応する設定 class=col-lg-number

Chrome ブラウザの場合、要素ウィンドウに画面が表示されます。幅が 768 未満の場合、

com-xs-12 のみが有効になります。

適応性: ブートストラップ フレームワークを使用して、Web ページがさまざまなデバイスに適応します

原則: デバイスの幅をクエリするためのメディア (デバイス/ブラウザ) クエリ @media 専用画面です

ブートストラップはアダプティブです。アダプティブとは、画面がどんなに大きくても、行を折り返さず、水平方向に拡大縮小するだけであることを意味します。ブートストラップはフェンス システムを通じて適応します。グリッド システムは、コンテナを 12 の等しい部分に分割します。サイズ。ブラウザを行と列に分割して適応を実現します。

例は次のとおりです:

@media only screen and (min-width:0px) and (max-width:480px){
body{
background-color:red;
}
}
@media only screen and (min-width:481px) and (max-width:720px){
body{
background-color:green;
}
}
@media only screen and (min-width:721px){
body{
background-color:blue;
}
}

関連する推奨事項: ブートストラップ チュートリアル

以上がブートストラップ アダプティブとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。