移動端前端初探

1.px->rem

2.

<meta name="viewport"
      content="width=device-width,
               height=device-height,
               inital-scale=1.0,
               maximum-scale=1.0,
               user-scalable=no;"
/>

<link rel="stylesheet" type="text/css" href="shetland.css" />
　　<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"href="shetland.css" />

3.js

res=window.matchMedia('(min-width:400)')  返回值 1.res.matches 布爾類型   2.res.media 就是括號裏面的值    3.res.addListener(fn)  4.res.removeListener(fn)

詳細代碼已分離出在github上。

4.

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

5.flex;新舊供三個版本。

2009,2011,2012

.main{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
}

.sub{
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2
}

flex-flow:

-webkit-flex-flow:

6.float清除浮動終極： 給最外層容器加上 ooerflow:auto; zoom:1; 外層容器就能夠被撐開了！！！

交互

click延遲

• 刮一刮 (canvas)
• 搖一搖 (Device Orientation API)
• 咻咻咻 (audio)
• 啪啪啪 (getUserMedia)

實踐

-WEBKIT-TAP-HIGHLIGHT-COLOR: RGBA(255,255,255,0) 能夠屏蔽點擊元素時出現的陰影, 經常使用於有事件代理的父元素

font icon 適量圖標：自由變換顏色大小

base64 ：減小一個請求。

 

調試：

1.npm g-g intall weinre

2.

1. cmd 中運行 weinre --httpPort 8081 --boundHost -all-   意思是監聽all的8081端口
2. 3.pc上訪問http://localhost:8081/
3. 點擊http://10.136.30.144:8081/client/#anonymous，

4. <script src="http://ip:8081/target/target-script-min.js#anonymous"></script>   
        
        javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);