《廖健-小屏幕，大舞台，HTML跑起来》SegmentFault .pdf

《《廖健-小屏幕，大舞台，HTML跑起来》SegmentFault .pdf》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、小屏幕大舞台HTML5跑起来阿里云-无线平台-廖健（正邪）2012-09-22@移动开发者大会智能手机改变世界2011年智能手机出货4.9亿，增长61.3%2012年Q2出货1.54亿，同比增长42.7%手机网民的逆袭2012上半年国内手机网民达3.88亿手机网民人数首次超越PC网民数量79%的开发者计划集成HTML5比较项NativeWeb体验�性能�下载收费�跨平台部署�开发者�发布和升级�安全�开发框架涌现zeptojQueryMobilejQTouchSenchaTouchThe-M-Projec

2、tPhoneGapTitaniumweb在手机上的挑战性能差网速慢耗流量分辨率多开发调试无成熟工具也有欣慰HTML5tagsection,nav,aside,header,footerinput[placeholder]Input[type=number

3、email

4、url]CSS3支持datauri复杂的选择器圆角、阴影、背景transform变形transition过渡animation动画JavascriptAPIJSONparse,stringifydocumentquerySelector,qu

5、erySelectorAllArrayforEach,map,reduce,filterlocalStorage,sessionStorage弹性设计使用box布局MediaQueries基于%和em设计使用box布局box-flexbox-alignbox-packbox-direction.wrap{box-orientdisplay:-webkit-box;-webkit-box-align:center;box-lines-webkit-box-pack:center;}...MediaQueri

6、estype:all

7、screen

8、print

9、tty

10、...feature:width

11、height

12、device-width

13、device-height

14、orientation

15、aspect-radio

16、resolution

17、...@mediascreenand(min-width:400px)and(max-width:700px){html{font-size:12px;}.logo{background:url(../img/logo_mdpi.png);}}基于%和em设计html{font:

18、10px;}@mediaalland(max-width:320px){html{font-size:7px;}}h2{font-size:1em;-webkit-margin-before:0.83em;-webkit-margin-after:0.83em;}deviceAPI传感器摄像头调用网络判断地理定位文件读写开发工具GoogleChromeweinreAdobeShadowRippleGoogleChromeweinre（webinspectorremote）AdobeShadowRipple

19、showcaseshowcaseThankYou!http://colorhook.com/http://weibo.com/colorhook