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{