1.設(shè)備事件
設(shè)備事件可以讓開發(fā)人員確定用戶在怎樣使用設(shè)備
移動(dòng)Safari添加了orientationchange事件，以便開發(fā)人員能夠確定用戶何時(shí)將設(shè)備橫向查看模式轉(zhuǎn)化為縱向查看模式。
屬性有三個(gè)值:0--表示肖像模式 ?90--左轉(zhuǎn)向模式 ?-90--右轉(zhuǎn)向模式
只要用戶改變了設(shè)備的查看模式，就會(huì)觸發(fā)orientationchange事件
eventUtil.addHandle(Window,orirntationchange,function(){
div.innerHTML='Currentorientation is "+window.orientation;
});
2.px像素知識(shí)
iphone5分辨率640*1136
邏輯像素與物理像素的關(guān)系
dpr:設(shè)備像素縮放比
計(jì)算公式:1px=(dpr)^2*dp;
iphone5的dpr=2;
3.viewport
手機(jī)瀏覽器認(rèn)為我們做了兩件事情:
頁面渲染在一個(gè)980px(ios)的viewport
縮放
一個(gè)300px的屏幕，放一個(gè)1000px的頁面，會(huì)混亂，所以要先虛擬一個(gè)980px的頁面，然后進(jìn)行縮放。
4.meta標(biāo)簽
最佳viewport設(shè)置：布局viewport=device-width,initial-scale=1,user-scalable=no">
5.flexbox彈性布局
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
6.響應(yīng)式布局
媒體查詢:@media screen and(max-width:100px){}
百分比布局
僅僅使用媒體查詢來適應(yīng)不同固定寬度設(shè)計(jì)
7.相對(duì)單位rem
em:是根據(jù)父節(jié)點(diǎn)的font-size為相對(duì)單位
rem:是根據(jù)html的font-size為相對(duì)單位
8.終端交互優(yōu)化
對(duì)click事件say no
彈性滾動(dòng)
上拉刷新
tap事件基礎(chǔ)
touch觸摸事件
下拉加載
9.touch基礎(chǔ)事件
touchstart:手指觸摸屏幕觸發(fā)
touchmove:手指在屏幕上滑動(dòng)，連續(xù)觸發(fā)
touchend:手指離開屏幕時(shí)觸發(fā)
10.自己封裝rem.js
window.onload=function(){
//設(shè)計(jì)師給的設(shè)計(jì)稿寬度
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";
}
兩欄布局，左邊固定，右邊自適應(yīng)
*{
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>
