首頁 > 文章 > web前端 > 什麼是bootstrap響應式

什麼是bootstrap響應式

在bootstrap中，響應式是指同一個頁面在不同螢幕尺寸下有著不同的佈局，可以相容不同解析度的設備，響應式web設計就是讓使用者透過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法，可以利用柵格系統，將一行平均分成12個格子來實現。

什麼是bootstrap響應式

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

什麼是bootstrap回應式

#回應式佈局指的是同一頁面在不同螢幕尺寸下有不同的佈局，可以相容於不同解析度的裝置

傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就夠，缺點就是CSS比較重。

實作：依賴柵格系統，將一行平均分成12個格子，可以指定元素佔幾個格子

什麼是響應式Web 設計

響應式Web 設計是一個讓使用者透過各種尺寸的裝置瀏覽網站獲得良好的視覺效果的方法。例如，您先在電腦顯示器上瀏覽一個網站，然後在智慧型手機上瀏覽，智慧型手機的螢幕尺寸遠小於電腦顯示器，但是您卻沒有感覺到任何差別，兩者的使用者體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。

我們已經在我們的流動佈局實例中應用了回應效能，並請您在不同的螢幕尺寸下進行瀏覽。您可以透過 Chrome 或 FireFox 的視窗大小調整的擴充功能來調整瀏覽器。

響應式 Web 設計工作原理

為了應用響應式 Web 設計，您需要建立一個包含適應各種裝置尺寸樣式的 CSS。一旦頁面在特定的裝置上加載，該頁面上使用了各種字體和 Web 開發技術，例如媒體查詢（Media Queries），此時，會先檢測設備的視口大小，然後加載特定於設備的樣式。

深入研究響應式Web 設計的CSS

我們將透過'bootstrap-responsive.css' 的學習，來了解"響應式設計"是如何實現細微差別的。在這之前，您必須在網頁的頭部區域加入下面這行程式碼：

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

視窗的 meta 標籤，重寫了預設的視口，並協助載入與特定視窗相關的樣式。

width 屬性設定螢幕寬度。它包含一個值，例如 320，表示 320 像素，或值為 'device-width'，用來告訴瀏覽器使用原始的解析度。

initial-scale 屬性是視口最初的比例。設定為 1.0 時，將呈現裝置的原始寬度。

當然，您必須添加Bootstrap 的響應式CSS，如下所示：

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

現在，如果您查找響應式CSS 文件，您會發現，在一些公共的聲明後邊（從行號10 到22），有各種以'@media' 開始的區域。這就是如何編寫適用於各種裝置的樣式。

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

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

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

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

最後兩個區域分別以'@media (min-width: 980px)' 和'@media (min-width: 1200px)' 開始，前一個是為最小寬度為980 像素的裝置設定樣式，後者是為最小寬度為1200 像素的裝置設定樣式。

所以，這樣樣式表的基本功能就是，透過使用 'min-width' 和 'max-width' 屬性，來根據裝置的最大寬度和最小寬度決定使用的樣式。