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

本教程操作環境：Windows10系統、bootstrap5版、DELL G3電腦

什么是bootstrap自適應

bootstrap自適應:

Bootstrap根據屏幕大小把設備分為超小屏幕,小屏幕,中等屏幕,大屏幕四種并把屏幕分為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瀏覽器，elements窗口中會發現當屏幕寬度小于768時，

只有com-xs-12生效。

自適應:網頁適應不同設備 ,用bootstrap框架

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

bootstrap是自適應的；自適應指的是不管屏幕有多大，都盡量不換行，只是橫向縮放，而bootstrap是通過柵欄系統實現自適應的；柵格系統通過定義容器的大小，將其分為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; } }