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

本篇內(nèi)容介紹了“bootstrap移動端布局的方式有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

　　局的八種方式：

　　1.固定布局

　　2.流動布局

　　3.浮動布局

　　4.定位布局

　　5.混合布局

　　6.flex布局

　　7.rem布局

　　8.響應(yīng)式布局

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

　　1.固定布局方法里把加好，然后根據(jù)設(shè)計(jì)稿設(shè)定相應(yīng)的寬度即可，其他地方類似于pc端。優(yōu)點(diǎn)思路沿用pc端，上手比較快缺點(diǎn)

　　大屏手機(jī)顯示網(wǎng)頁比較寬，而固定布局寬度參照永遠(yuǎn)是固定的寬度（設(shè)計(jì)稿的大?。瑢?dǎo)致左右兩邊會有空白。手機(jī)橫屏的時(shí)候兩邊空白更亮。

　　2.流動布局

　　方法

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

　　優(yōu)點(diǎn)能更很好的適應(yīng)各個屏幕分辨率的手機(jī)。缺點(diǎn)

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

　　3.浮動布局方法

　　float+clearfix（清除浮動）

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

　　。clearfix:after{

　　content:"";

　　display:block;

　　clear:both;

　　}

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

　　clearfix:after{

　　content:"";

　　display:block;

　　clear:both;

　　height:0;

　　visibility:hidden;

　　}

　　**優(yōu)點(diǎn)**? ? ? ? 這是傳統(tǒng)的浮動方式，寫法簡單，實(shí)現(xiàn)效果起來干脆利落？ ? **缺點(diǎn)**對浮動元素要求比較嚴(yán)格，布局也不太靈活

　　4.定位布局方法在布局當(dāng)中很常用，利用position+四個方位的具體值（top/left/right/bottom）相互配合，實(shí)現(xiàn)起來也比較容易優(yōu)點(diǎn)

　　實(shí)現(xiàn)簡單，在移動端中，定位很常用，尤其是彈窗，

　　。mask{

　　position:fixed;

　　left:50%;

　　top:50%;

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

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

　　}

　　缺點(diǎn)

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

　　fixed+input在ios上存在bug,會出現(xiàn)使用fixed布局的元素亂掉。在android手機(jī)上當(dāng)input框獲取焦點(diǎn)時(shí)，換氣鍵盤，會出現(xiàn)定位的元素被抬升至手機(jī)鍵盤的上方。（了解）

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

　　代碼有點(diǎn)累贅；代碼不統(tǒng)一，維護(hù)困難

　　6.flex布局（重點(diǎn)）

　　方法

　　也叫彈性布局。

　　/--只需父元素設(shè)置--/

　　{

　　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/

　　}

　　/--然后子元素設(shè)置相應(yīng)的比例--/

　　{

　　-webkit-box-flex:1;

　　-webkit-flex:1;

　　-ms-flex:1;

　　flex:1;

　　}

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

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

　　1.rem+@media（通過媒體查詢設(shè)置html的font-size值，達(dá)到自適應(yīng)）

　　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自動獲取設(shè)備寬度，計(jì)算得到相應(yīng)設(shè)備下html的font-size值達(dá)到自適應(yīng)）（了解）

　?。unction（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）;

　　優(yōu)點(diǎn)在任何設(shè)備下都可以達(dá)到完全適配，頁面布局樣式完全自適應(yīng)缺點(diǎn)

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

　　8.響應(yīng)式布局方法使用@media（媒體查詢）設(shè)置頁面在不同的屏幕寬度下達(dá)到自適應(yīng)以及響應(yīng)式（根據(jù)不同屏幕大小，頁面布局，樣式會做出相應(yīng)的調(diào)整）典型案例（bootStrap官網(wǎng)）優(yōu)點(diǎn)不僅在不同的屏幕下達(dá)到自適應(yīng)，還會在相應(yīng)的屏幕下對頁面布局，樣式做出相應(yīng)的調(diào)整，達(dá)到更加的用戶體驗(yàn)缺點(diǎn)

　　兼容各種設(shè)備工作量大，效率低下；代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間過長；一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況；增加UI和開發(fā)的工作量。

　　9.圣杯布局

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

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

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