bootstrap移動端布局的方式有哪些

本篇內容介紹了“bootstrap移動端布局的方式有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　一、下面我將簡單的介紹移動端布

　　局的八種方式：

　　1.固定布局

　　2.流動布局

　　3.浮動布局

　　4.定位布局

　　5.混合布局

　　6.flex布局

　　7.rem布局

　　8.響應式布局

　　9.**圣杯布局10.**雙飛翼布局

　　1.固定布局方法里把加好，然后根據設計稿設定相應的寬度即可，其他地方類似于pc端。優點思路沿用pc端，上手比較快缺點

　　大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是固定的寬度（設計稿的大小），導致左右兩邊會有空白。手機橫屏的時候兩邊空白更亮。

　　2.流動布局

　　方法

　　適用百分比（%）做單位。

　　優點能更很好的適應各個屏幕分辨率的手機。缺點

　　不夠靈活，添加元素時，需要更改其他元素的值。

　　3.浮動布局方法

　　float+clearfix（清除浮動）

　　/--不需兼容老版本--/

　　。clearfix:after{

　　content:"";

　　display:block;

　　clear:both;

　　}

　　--需要兼容老版本--/

　　clearfix:after{

　　content:"";

　　display:block;

　　clear:both;

　　height:0;

　　visibility:hidden;

　　}

　　**優點**? ? ? ? 這是傳統的浮動方式，寫法簡單，實現效果起來干脆利落？ ? **缺點**對浮動元素要求比較嚴格，布局也不太靈活

　　4.定位布局方法在布局當中很常用，利用position+四個方位的具體值（top/left/right/bottom）相互配合，實現起來也比較容易優點

　　實現簡單，在移動端中，定位很常用，尤其是彈窗，

　　。mask{

　　position:fixed;

　　left:50%;

　　top:50%;

　　-webkit-transform:translate3d（-50%,-50%,0）;

　　transform:translate3d（-50%,-50%,0）;

　　}

　　缺點

　　移動端中頻繁的使用定位，會出現一些莫名的bug;

　　fixed+input在ios上存在bug,會出現使用fixed布局的元素亂掉。在android手機上當input框獲取焦點時，換氣鍵盤，會出現定位的元素被抬升至手機鍵盤的上方。（了解）

　　5.混合布局方法所謂混合布局，就是把所有學到的知識靈活運用在布局中。例如：rem+百分比（流動布局） flex+rem等優點布局靈活，集合其他布局的優勢達到自己的布局要求缺點

　　代碼有點累贅；代碼不統一，維護困難

　　6.flex布局（重點）

　　方法

　　也叫彈性布局。

　　/--只需父元素設置--/

　　{

　　display:-webkit-box; /android2.1-3.0 ios 3.2-4.3/

　　display:-moz-box; /firefox/

　　display:-webkit-flex; /chrome 21+/

　　display:-ms-flexbox; /wp ie 10/

　　display:flex; /android 4.4/

　　}

　　/--然后子元素設置相應的比例--/

　　{

　　-webkit-box-flex:1;

　　-webkit-flex:1;

　　-ms-flex:1;

　　flex:1;

　　}

　　這個是最簡單的flex布局了，其實彈性布局里面還有很多簡單高效實用的屬性，很方便移動端的布局。？ ?  **優點**? ? ? ? 自適應很好，靈活性很強，目前在移動端應用的還是比較廣泛。？ ?  **缺點**需要寫很多兼容代碼。

　　7.rem布局方法rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的font-size大小就可以控制rem的大小。有以下兩種適配方式：

　　1.rem+@media（通過媒體查詢設置html的font-size值，達到自適應）

　　html{

　　-webkit-text-size-adjust:none;

　　font-size:10px;

　　}

　　@media screen and （min-width:321px） and （max-width:375px）{

　　html{

　　font-size:10px;

　　}

　　}

　　@media screen and （min-width:376px） and （max-width:414px）{

　　html{

　　font-size:10.25px;

　　}

　　}

　　@media screen and （min-width:415px） and （max-width:454px）{

　　html{

　　font-size:10.5px;

　　}

　　}

　　@media screen and （min-width:455px） and （max-width:554px）{

　　html{

　　font-size:10.75px;

　　}

　　}

　　@media screen and （min-width:455px）{

　　html{

　　font-size:11px;

　　}

　　}

　　2.rem+js（通過js自動獲取設備寬度，計算得到相應設備下html的font-size值達到自適應）（了解）

　　！function（n） {

　　var e=n.document,

　　t=e.documentElement,

　　i=720,

　　d=i / 100,

　　o="orientationchange" in n ? "orientationchange": "resize",

　　a=function（） {

　　var n=t.clientWidth || 320;

　　n > 720 && （n=720），

　　t.style.fontSize=n / d + "px"

　　};

　　e.addEventListener && （n.addEventListener（o, a, !1）， e.addEventListener（"DOMContentLoaded", a, !1））

　　} （window）;

　　優點在任何設備下都可以達到完全適配，頁面布局樣式完全自適應缺點

　　rem+@media這種方式不能所有設備全適配

　　8.響應式布局方法使用@media（媒體查詢）設置頁面在不同的屏幕寬度下達到自適應以及響應式（根據不同屏幕大小，頁面布局，樣式會做出相應的調整）典型案例（bootStrap官網）優點不僅在不同的屏幕下達到自適應，還會在相應的屏幕下對頁面布局，樣式做出相應的調整，達到更加的用戶體驗缺點

　　兼容各種設備工作量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間過長；一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況；增加UI和開發的工作量。

　　9.圣杯布局

　　利用float來實現，首先將三列放到一個父元素內后左浮動，之后給左右中分別設置寬度200px,250px,100%。

　　之后給中間，右邊分別設置margin-left為-200px,-250px。之后再將左右兩列進行相對定位position：relative;并分別設置left:-200px;right:-250px;最后便是等高布局了，給左中右設置padding-bottom:2000px;margin-bottom:-2000px;給其父元素設置overflow:hidden即可。

“bootstrap移動端布局的方式有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！