移动端前端初探

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);