前端知道分享，移动端布局
一、下面我将简单的介绍移动端布
局的八种方式：
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常用的东西自己下去了解
