前端|響應式開發之布局容器

• 2020 年 3 月 30 日
• 筆記

問題描述

在前面學習了響應式布局原理，簡單的了解了一下響應式布局許多功能及其原理，今天來學習一下響應式布局中的布局容器。

解決方案

響應式布局和之前的開發布局有著很多不同的地方，在做響應式開發的時候會用的一個大的布局容器，在做響應式布局開發的時候會用到一個框架——Bootstarp前端開發框架。這個框架將需要的頁面內容和柵格系統包裹一個.container容器，Bootstartp預先定義好了這個類，叫.container它提供了兩個作此用處的類。使用的時候必須叫這個名字，因為bootstarp事先將這個類定義好了，所以必須叫做.container

首先看第一個叫做container類，這個container類就是響應式的布局容器，它的寬度是固定死的，就和在前面的響應式布局原理中看到的圖片是一樣的。

（1）大屏（>=1200px）寬度為1170px

（2）中屏（>=992px）寬度為970px

（3）小屏（>=768px）寬度為750px

（4）超小屏（100%）

所以在使用的時候只需要在Bootstarp頁面中寫入.container類，就再也不需要寫媒體查詢了，所以稱這個類為預定義類，在Bootstarp中有很多這樣的預定義類，只需要了解這個類怎麼使用以及這個類實現了什麼功能就可以了。在之前的響應式布局中還需要手動去寫，在不同的尺寸下劃分為不同的檔位，在當然尺寸是可以隨便劃分的，但在Bootstarp是規定了這四個檔位，就只用這四個就可以了。

圖2.1 效果圖

圖2.2 效果圖

圖2.3 效果圖

從上面的三張圖中可以看到這幾張圖的大概效果。

還有一種布局是container-fluid類，這種布局的特點是：

（1）流式布局容器百分百寬度

（2）佔據全部視口（viewport）的容器

（3）適合於單獨做移動端開發

圖2.3 效果圖

從上面的效果圖中可以大致看出兩種布局的區別，需要注意的是container類默認外邊距為15px。

結語

從上面的兩種布局來看，在做響應式開發的時候可以選擇container類，如果單獨做移動端的開發可以選擇container-fluid類。

END

編 輯 | 王楠嵐

責 編 | 桂 軍

where2go 團隊