在bootstrap中，自適應(yīng)指的是根據(jù)屏幕大小把設(shè)備分為超小屏幕、中屏幕、中等屏幕、大屏幕四種，網(wǎng)頁會根據(jù)設(shè)備屏幕不同，將網(wǎng)頁分為12列，將瀏覽器以行列形式去劃分實現(xiàn)自適應(yīng)；自適應(yīng)不管屏幕有多大，都盡量不換行，只是橫向縮放。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

什么是bootstrap自適應(yīng)

bootstrap自適應(yīng):

Bootstrap根據(jù)屏幕大小把設(shè)備分為超小屏幕,小屏幕,中等屏幕,大屏幕四種并把屏幕分為12列

對應(yīng)屏幕寬度為:

• 超小屏幕(手機(jī)):0-768px 對應(yīng)設(shè)置 class=col-xs-number

• 小屏幕(平板):768-992px 對應(yīng)設(shè)置class=col-sm-number

• 中等屏幕(電腦):992-1200px 對應(yīng)設(shè)置 class=col-md-number

• 大屏幕(電腦):1200px-? 對應(yīng)設(shè)置 class=col-lg-number

在chrome瀏覽器，elements窗口中會發(fā)現(xiàn)當(dāng)屏幕寬度小于768時，

只有com-xs-12生效。

自適應(yīng):網(wǎng)頁適應(yīng)不同設(shè)備 ,用bootstrap框架

原理:是媒體(設(shè)備/瀏覽器)查詢 @media only screen 查詢設(shè)備的寬度

bootstrap是自適應(yīng)的；自適應(yīng)指的是不管屏幕有多大，都盡量不換行，只是橫向縮放，而bootstrap是通過柵欄系統(tǒng)實現(xiàn)自適應(yīng)的；柵格系統(tǒng)通過定義容器的大小，將其分為12等份，將瀏覽器以行列形式去劃分實現(xiàn)自適應(yīng)。

示例如下：

@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; } }