前端響應式布局與Bootstrap柵格系統快速了解與應用

一.響應式開發快速了解：

你好呀~(????)? ，不知道你看到這篇文章的時候是幾點了，不過我現在是深夜00:15分。每次到這個時間我反倒有了種安心的感覺，沒有消息沒有通知沒有什么會打擾我。我喜歡夜晚這種靜謐的感覺，特別是夏天的夜。出去抬頭還能看到一閃一閃星星，我也喜歡星星。今天倒是沒有什么特別的要分享的，那就分享一些前端基礎的響應式布局的知識把。

響應式開發可以使用媒體查詢針對不同寬度的設備進行布局和樣式的設置,從而適配不同設備的目的。媒體查詢就是使用 @media 查詢，它可以針對不同的屏幕尺寸定義不同的樣式。簡單來說就是同一頁面要在不同尺寸的設備顯示不同的布局排列方式。

媒體查詢@media的CSS語法 例子：

@media mediatype and|not|only (media feature) { CSS-Code; }

media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

不同設備一般尺寸區間如下：

響應式需要一個父級做為布局容器，來配合子級元素來實現變化效果。原理就是在不同屏幕下，通過媒體查詢來改變這個布局容器的大小，然后子元素的排列方式和大小也改變，最終達到不同尺寸屏幕下，看到不同的頁面布局和樣式。

首先，media官方使用文檔鏈接：https://www.runoob.com/cssref/css3-pr-mediaquery.html

比如有一個div盒子，在不同的屏幕尺寸大小呈現不同的寬度：

初始代碼如下，還沒定義寬度：

.container{ height: 100px; background-color: skyblue; margin: 0 auto; }

（1）手機屏幕下，小于768px時設置100%寬：

.container{ height: 100px; background-color: skyblue; margin: 0 auto; } @media screen and (max-width: 767px){ .container{ width: 100%; } }

（2）平板屏幕下，設置750px寬：

@media screen and (min-width: 768px){ .container{ width: 750px; } }

（3）中等屏幕下，設置970px寬：

@media screen and (min-width: 992px){ .container{ width: 970px; } }

（4）大屏幕下，設置1170px寬：

@media screen and (min-width: 1200px){ .container{ width: 1170px; } }

效果：

做一個響應式導航欄，效果如下：

代碼：

• 導航
• 導航
• 導航
• 導航
• 導航
• 導航
• 導航
• 導航

*{ margin: 0; padding: 0; } .container{ width: 750px; background-color: skyblue; margin: 0 auto; } .container ul li{ width: calc(750px / 8); height: 30px; background-color: rgb(21, 240, 192); float: left; list-style: none; } @media screen and (max-width:767px){ .container{ width: 100%; } .container ul li{ width: calc(100% / 3); } }

二.bootstrap快速了解與應用：

Bootstrap 自稱是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。不過這東西我認為看開發需求和場景等等而定，有時寫簡單的vue項目可能用element-ui多一些。不過肯定是都要了解的。

官方使用文檔為：https://v3.bootcss.com/

Bootstrap里有很多現成封裝好的組件，可以直接復制拿來使用。

首先引入bootstrap，我這里直接在html單頁面通過鏈接引入即可。也可以通過npm下載或者下載包等等方式引入，這些可以查看官方文檔。官方給的html單頁面基本模板如下，可去官方文檔查看：