在bootstrap中，響應(yīng)式是指同一個(gè)頁面在不同屏幕尺寸下有著不同的布局，可以兼容不同分辨率的設(shè)備，響應(yīng)式web設(shè)計(jì)就是讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法，可以利用柵格系統(tǒng)，將一行平均分成12個(gè)格子來實(shí)現(xiàn)。

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

什么是bootstrap響應(yīng)式

響應(yīng)式布局指的是同一頁面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的設(shè)備

傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機(jī)端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就夠，缺點(diǎn)就是CSS比較重。

實(shí)現(xiàn)：依賴于柵格系統(tǒng)，將一行平均分成12個(gè)格子，可以指定元素占幾個(gè)格子

什么是響應(yīng)式 Web 設(shè)計(jì)

響應(yīng)式 Web 設(shè)計(jì)是一個(gè)讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法。例如，您先在計(jì)算機(jī)顯示器上瀏覽一個(gè)網(wǎng)站，然后在智能手機(jī)上瀏覽，智能手機(jī)的屏幕尺寸遠(yuǎn)小于計(jì)算機(jī)顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗(yàn)幾乎一樣，這說明這個(gè)網(wǎng)站在響應(yīng)式設(shè)計(jì)方面做得很好。

我們已經(jīng)在我們的流動(dòng)布局實(shí)例中應(yīng)用了響應(yīng)性能，并請您在不同的屏幕尺寸下進(jìn)行瀏覽。您可以通過 Chrome 或 FireFox 的窗口大小調(diào)整的擴(kuò)展來調(diào)整瀏覽器。

響應(yīng)式 Web 設(shè)計(jì)工作原理

為了應(yīng)用響應(yīng)式 Web 設(shè)計(jì)，您需要?jiǎng)?chuàng)建一個(gè)包含適應(yīng)各種設(shè)備尺寸樣式的 CSS。一旦頁面在特定的設(shè)備上加載，該頁面上使用了各種字體和 Web 開發(fā)技術(shù)，比如媒體查詢（Media Queries），此時(shí)，會(huì)先檢測設(shè)備的視口大小，然后加載特定于設(shè)備的樣式。

深入研究響應(yīng)式 Web 設(shè)計(jì)的 CSS

我們將通過 'bootstrap-responsive.css' 的學(xué)習(xí)，來了解"響應(yīng)式設(shè)計(jì)"是如何實(shí)現(xiàn)細(xì)微差別的。在這之前，您必須在網(wǎng)頁的頭部區(qū)域加入下面這行代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

視口的 meta 標(biāo)簽，重寫了默認(rèn)的視口，并幫助加載與特定視口相關(guān)的樣式。

width 屬性設(shè)置屏幕寬度。它包含一個(gè)值，比如 320，表示 320 像素，或者值為 'device-width'，用來告訴瀏覽器使用原始的分辨率。

initial-scale 屬性是視口最初的比例。當(dāng)設(shè)置為 1.0 時(shí)，將呈現(xiàn)設(shè)備的原始寬度。

當(dāng)然，您必須添加 Bootstrap 的響應(yīng)式 CSS，如下所示：

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

現(xiàn)在，如果您查找響應(yīng)式 CSS 文件，您會(huì)發(fā)現(xiàn)，在一些公共的聲明后邊（從行號(hào) 10 到 22），有各種以 '@media' 開始的區(qū)域。這就是如何編寫適用于各種設(shè)備的樣式。

第一個(gè)區(qū)域以 '@media (max-width: 480px)' 開始，為最大寬度為 480 像素的設(shè)備設(shè)置樣式。

第二個(gè)區(qū)域以 '@media (max-width: 767px)' 開始，為最大寬度為 767像素的設(shè)備設(shè)置樣式。

第三個(gè)區(qū)域以 '@media (min-width: 768px) 和 (max-width: 979px)' 開始，為最小寬度為 768 像素和最大寬度為 979 像素的設(shè)備設(shè)置樣式。

下一個(gè)區(qū)域是為最大寬度為 979 像素的設(shè)備設(shè)置樣式。所以是以 '@media (max-width: 979px)' 開始。

最后兩個(gè)區(qū)域分別以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 開始，前一個(gè)是為最小寬度為 980 像素的設(shè)備設(shè)置樣式，后一個(gè)是為最小寬度為 1200 像素的設(shè)備設(shè)置樣式。

所以，這樣樣式表的基本作用就是，通過使用 'min-width' 和 'max-width' 屬性，來根據(jù)設(shè)備的最大寬度和最小寬度決定使用的樣式。