移动端项目总结

1.设备事件

设备事件可以让开发人员确定用户在怎样使用设备

移动Safari添加了orientationchange事件，以便开发人员能够确定用户何时将设备横向查看模式转化为纵向查看模式。

属性有三个值:0--表示肖像模式  90--左转向模式  -90--右转向模式

只要用户改变了设备的查看模式，就会触发orientationchange事件

eventUtil.addHandle(Window,orirntationchange,function(){

div.innerHTML='Currentorientation is "+window.orientation;

});

2.px像素知识

iphone5分辨率640*1136

逻辑像素与物理像素的关系

dpr:设备像素缩放比

计算公式:1px=(dpr)^2*dp;

iphone5的dpr=2;

3.viewport

手机浏览器认为我们做了两件事情:

页面渲染在一个980px(ios)的viewport

缩放

一个300px的屏幕，放一个1000px的页面，会混乱，所以要先虚拟一个980px的页面，然后进行缩放。

4.meta标签

最佳viewport设置：布局viewport=device-width,initial-scale=1,user-scalable=no">

5.flexbox弹性布局

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

6.响应式布局

媒体查询:@media screen and(max-width:100px){}

百分比布局

仅仅使用媒体查询来适应不同固定宽度设计

7.相对单位rem

em:是根据父节点的font-size为相对单位

rem:是根据html的font-size为相对单位

8.终端交互优化

对click事件say no

弹性滚动

上拉刷新

tap事件基础

touch触摸事件

下拉加载

9.touch基础事件

touchstart:手指触摸屏幕触发

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

touchend:手指离开屏幕时触发

10.自己封装rem.js

window.onload=function(){

//设计师给的设计稿宽度

getRem(720,100)

};

window.onresize=function(){

getRem(720,100)

};

functiongetRem(pwidth,prem){

let html=document.getElementsByTagName("html")[0];

let oWidth=document.body.clientWidth||document.documentElement.clientWidth;

html.style.fontSize=oWidth/pwidth*prem+"px";

}

两栏布局，左边固定，右边自适应

*{

margin:0;

padding:0;

}

第一种方式

.left{

width:120px;

background:#4f8fd6;

float:left;

}

.right{

margin-left:120px;

background:#8d8d8d;

}

第二种方式

.wrapper-flex{

display:flex;

align-items:flex-start;

}

.wrapper-flex.left{

flex:0 0auto;

background:yellowgreen;

}

.wrapper-flex.right{

flex:1 1auto;

background:red;

}

第一种方式

<div class="wrapper">

    <div class="left">

    </div>

<div class="right"></div>

</div>

第二种方式

<div class="wrapper-flex">

<div class="wrapper-flex left"></div>

<div class="wrapper-flex right"></div>

</div>