1.設備事件
設備事件可以讓開發(fā)人員確定用戶在怎樣使用設備
移動Safari添加了orientationchange事件颤殴，以便開發(fā)人員能夠確定用戶何時將設備橫向查看模式轉(zhuǎn)化為縱向查看模式近她。
屬性有三個值:0--表示肖像模式 ?90--左轉(zhuǎn)向模式 ?-90--右轉(zhuǎn)向模式
只要用戶改變了設備的查看模式湖蜕，就會觸發(fā)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:是根據(jù)父節(jié)點的font-size為相對單位
rem:是根據(jù)html的font-size為相對單位
8.終端交互優(yōu)化
對click事件say no
彈性滾動
上拉刷新
tap事件基礎
touch觸摸事件
下拉加載
9.touch基礎事件
touchstart:手指觸摸屏幕觸發(fā)
touchmove:手指在屏幕上滑動锋玲，連續(xù)觸發(fā)
touchend:手指離開屏幕時觸發(fā)
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>
