移动端开发最佳实践

《移动端开发最佳实践》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、移动Web开发最佳实践拔⾚&完颜F2EofTaobao&eTao2012-07-07拔⾚F2EofTaobaohttp://jayli.github.comWebDeveloper&Translator完颜F2EofeTaohttp://weibo.com/mario199920052008移动设备的演化纠结的去学习Objective-C万维⽹www万维⽹www•平台选择•MediaQuery•⽂字排版•流体布局•图⽚载⼊•Dom操作性能优化•触屏事件•…响应式设计⼩组http://wiki.ued.taobao

2、.net/doku.php?id=ued.bj:f2e:rdhttp://www.alistapart.com/articles/responsive-web-design响应式设计独特之处•⼀套项⽬代码•⼀套开发环境•⼀个URL•内容所见即所得•不会因为终端升级⽽导致不可⽤•…3204807681024偷懒的做法…⼀种偷懒的做法是：等⽐缩放但等⽐缩放后的页⾯⽂字像蚂蚁⼀样看不清楚布局百分⽐宽度+浮容器动.wrapper{width:100%;}.wrapper.item{float:left;}960px520

3、px200px200px20px20px定宽布局90%50%20%20%5%5%流体布局http://wiki.ued.taobao.nethttp://taobao.7m.cn/复杂的页⾯怎么办?功能减法FewerFeatures样式1样式2样式3更⾼分辨率的样式http://wt.taobao.com查看源码ViewPortMetaViewPortMeta参数•width=devi

4、ce-width•user-scalable=1•initial-scale=1•maximum-scale=1•minimum-scale=1LayoutviewportVisualviewport=LayoutviewportViewPort参数最佳组合

5、nitial-scale=1">ViewPort参数最佳组合MediaQueryCSS/*PC宽屏样式*//*iPad及以下，所有小于（不等于）960宽度的平板电脑*/@mediaonlyscreenand(max-width

6、:959px){}/*仅iPad竖版，所有小于（不等于）960宽度的平板电脑的竖版*/@mediaonlyscreenand(min-width:768px)and(max-width:959px){}/*iPhone及以下*/@mediaonlyscreenand(max-width:767px){}/*仅iPhone横版，包括某些平板电脑的竖版*/@mediaonlyscreenand(min-width:480px)and(max-width:767px){}/*仅iphone4竖版*/@mediaonly

7、screenand(max-width:479px){}MediaQuery书写思路•先写⾼分辨率样式•先写低分辨率样式MediaQuery书写思路•先写⾼分辨率样式•先写低分辨率样式哪种写法更适合？MediaQuery书写思路•先写⾼分辨率样式•先写低分辨率样式原因？1，设计师设计原型往往⾸先基于宽屏甚⾄不会给出适配设计稿2，宽屏视觉元素更多，减法⽐加法容易SkeletonCSSGridSystemhttp://www.getskeleton.comreset.css字体样式定义body{font-family

8、:tahoma,arial,5b8b4f53,sans-serif;}html{-webkit-text-size-adjust:100%;}iOS：华⽂细黑+HelveticaAndroid：⽂泉驿微⽶黑+DroidSans响应式图⽚有两种基本的图⽚类型需要考虑1，需要缩放的图⽚2，不能缩放的图⽚1.2.http://www.flickr.com/photos/zh