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即可。

[图片上传中。。。(1)]

10.双飞翼布局

用float来实现，首先将左中右分别设置宽度为200px,100%,250px。中右分别设置margin-left为-200px和-250px.中间元素下有一个子元素，设置margin-left和margin-right分别为200px余250px。最后便是等高布局了，给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。

[图片上传中。。。(2)]

[图片上传中。。。(3)]

二、杂货

手机端字体标准font-family: Helvetica, "Microsoft Yahei", "Heiti SC", "Droid Sans", "Droidsansfallback", SimSun, sans-serif;

1.触摸事件touch

touchstart 手指放在屏幕上触发

touchmove 手指在屏幕上移动，连续触发

touchend 手指离开屏幕触发

touchcancel 当系统停止跟踪时触发，当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

注意：

移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把默认行为阻止了ev.preventDefault。

document.addEventListener('touchstart',function(ev){

ev.preventDefault();

});

var box=document.getElementById("box");

box.addEventListener('touchstart',function(){

this.innerHTML='手指按下了';

});

box.addEventListener('touchmove',function(){

this.innerHTML='手指移动了';

});

box.addEventListener('touchend',function(){

this.innerHTML='手指离开了';

});

2.touch事件对象

ev.touches 当前屏幕的手指列表

ev.targetTouches 当前元素上的手指列表

ev.changedTouches 触发当前事件的手指列表

每个touch对象都包含了以下几个属性(打印ev.touches如下)：

[图片上传中。。。(4)]

clientX //触摸目标在视口中的X坐标。 clientY //触摸目标在视口中的Y坐标。 Identifier //标示触摸的唯一ID。 pageX //触摸目标在页面中的X坐标。 pageY //触摸目标在页面中的Y坐标。 screenX//触摸目标在屏幕中的X坐标。 screenY //触摸目标在屏幕中的Y坐标。

target // 触摸的DOM节点目标。

代码：

var box=document.getElementById("box");

//相当于mousedown

box.addEventListener('touchstart',function(ev){

//console.log(ev.touches);

this.innerHTML=ev.touches.length;//按下手指数

});

3.设备加速度事件devicemotion(了解：知道有这么个东西，面试移动端时项目会问到)

devicemotion 封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

其中加速度的数据包含以下三个方向：

x：横向贯穿手机屏幕；

y：纵向贯穿手机屏幕；

z：垂直手机屏幕

[图片上传中。。。(5)]

鉴于有些设备没有排除重力的影响，所以该事件会返回两个属性：

1、accelerationIncludingGravity(含重力的加速度)

2、acceleration(排除重力影响的加速度)

注意：这个事件只能放在window身上

demo1:显示重力加速度的值

代码：

window.addEventListener('devicemotion',function(ev){

var motion=ev.accelerationIncludingGravity;

box.innerHTML='x:'+motion.x+'

'+'y:'+motion.y+'

'+'z:'+motion.z;

});

demo2:方块跟着重力左右移动

window.addEventListener('devicemotion',function(ev){

var motion=ev.accelerationIncludingGravity;

var x=parseFloat(getComputedStyle(box).left);//box目前的left值

box.style.left=x+motion.x+'px';

});

demo3:摇一摇应用原理

var box=document.getElementById('box');

var lastRange=0; //上一次摇晃的幅度

var isShake=false; //决定用户到底有没有大幅度摇晃

window.addEventListener('devicemotion',function(ev){

var motion=ev.accelerationIncludingGravity;

var x=Math.abs(motion.x);

var y=Math.abs(motion.y);

var z=Math.abs(motion.z);

varrange=x+y+z;//当前摇晃的幅度if(range-lastRange>100){//这个条件成立说明用户现在已经在大幅度摇晃isShake=true;}if(isShake &&range<50){//这个条件成立，说明用户摇晃的幅度很小了就要停了box.innerHTML='摇晃了';    isShake=false;}

});

4.media

min-width:                                当屏幕大小 大于等于 某个值的时候识别max-width:                                当屏幕大小 小于等于 某个值的时候识别                  关键字：and only not@mediaall and (min-width:500px) {            #box{background-color: green;            }        }

5.引入方式

1.2.@importurl(01.css) (min-width:400px);3.@media all and (min-width:500px) {                #box{background-color:green;                }    }

6.关于bootstrap

1.栅格化系统 ：将一行分为12列

容器：

container

固定宽度

container-fluid    百分比宽度

行：row

列：lg 大屏幕 大桌面显示器 (≥1200px)

md 中等屏幕 桌面显示器 (≥992px)

sm 小屏幕 平板 (≥768px)

xs 超小屏幕 手机 (<768px)

body{

margin: 0;

}

div{

height: 100px;

background-color: #f00;

font-size: 50px;

color: #fff;

}

.row div{

height: 100px;

background-color: yellow;

border: 1px solid #000;

}

2.col-md-offset-设置列偏移

1

2

3..col-md-push-(往后) 和 .col-md-pull-*(往前) 列排序4. hidden-xs 超小屏幕消失

visible-xs 超小屏幕显示

7.移动端适配

1.百分比适配

弊端：height无法设置

2.viewport 适配

原理：就是用js把所有设备的viewport设置成一样的

3.rem适配

1rem=根节点的字体大小

动态设置根节点的字体大小

8.了解(meta)

页面描述

页面关键词

为移动设备添加 viewport

百度禁止转码

禁止数字自动识别为电话号码

禁止自动自动识别地址

禁止自动自动识别日期

关闭电话号码的自动识别：

开启电话功能

开启短信功能：

禁止自动自动识别 Email

邮箱的自动识别：

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致CSS3失效。看来，需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是 IE8就输出content="IE=8"，如果是IE9就输出 content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下：

9.弹性盒子

1. box-sizing:border-box/ (没有继承) 给自己加

效果，压边框到盒子里

padding-box/content-box 没用

chrome51：padding-box不好使

FF47： padding-box好使

盒模型:width+padding+border

border-box: width代码：box-sizing*{margin:0;padding:0;  }.box{width:100%;height:100px;background: cornflowerblue;border:10pxsolid#000;padding:010px;box-sizing: border-box;    }nav{height:100px;margin-top:50px;background:#f60;width:100%;    }navul{width:100%;display:-webkit-box;    }.nav1{-webkit-box-direction:reverse;/*翻转*/}navulli{height:100px;-webkit-box-flex:1;list-style: none;background:aqua;    }.ben{width:100px;height:500px;background: red;display:-webkit-box;    }.benli{list-style: none;-webkit-box-flex:1;    }aaaaaa--box-sizing:border-box; 对border和padding都有效果，        都会压进去(没有继承)给自己加。ie8+，chrome，ff。其他两个值不好用，        padding-box在chrome5.1不好用ff47好用

1

2

3

4

5

1

2

3

4

5

内阴影：m

box-shadow:inset 0 2px 2px #ccc;

弹性盒子：

父级：

display:-webkit-box;

-webkit-box-orient:vertical; 竖直方向-webkit-box-direction:reverse; 翻转-webkit-box-pack:center; 水平居中start/end-webkit-box-align:center; 垂直居中start/end

子级：

-webkit-box-flex:1;

1:占几份

{margin: 0; padding: 0;}

div{

width: 200px;

height: 500px;

}

ul{

-webkit-box-orient:vertical; /竖直方向*/

}

ul li{

-webkit-box-flex:1;

list-style: none;

background: red;

margin: 20px 0;

}

1

1

1

1

1

bootstrap常用的东西自己下去了解

[图片上传中。。。(6)] [图片上传中。。。(7)] [图片上传中。。。(8)] [图片上传中。。。(9)] [图片上传中。。。(10)] [图片上传中。。。(11)] [图片上传中。。。(12)] [图片上传中。。。(13)] [图片上传中。。。(14)] [图片上传中。。。(15)]