使用bootstrap網格系統適配移動端

前言

最近使用Vue開發前端管理界面，遇到了需要適配移動端的需求。
之前的頁面佈局主要是使用flex進行佈局。
關於flex佈局網上有很多資料，這裏不再贅述。

使用css響應式實現

如果在之前flex佈局的基礎上，增加css的響應式佈局那麼如下

    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }

這個代碼是說頁面寬度小於960px的時候，響應式（動態的），啓用佈局代碼。
這種偏原生的實現也可以。

使用Bootstrap網格系統

上面的flex和css響應式佈局，可以實現適配。不過代碼量可能不較大。
所以，這裏還是推薦使用Bootstrap進行移動端的適配，美滋滋。
關於這一塊，可以參考教程.

<!-- 使用row 和 col這2個class進行組合，如下:-->
<div class=“row”>
	<div class="clo-lg-6 clo-sm-12">
		box1
	</div>
	<div class="clo-lg-6 clo-sm-12">
		box1
	</div>
</div>

代碼很簡單，思路是使用clo-sm、clo-lg等響應式類，進行不同的佈局。除此之外還有clo-float之類的，這些可以進行擴展。
所以，直接採取bootstrap的方案，拋棄flex佈局，直接適配移動端了。