移动端Web开发

摘要：

　　主要介绍移动端Web开发须要注意的要点，以及一些基础知识，如手机尺寸，手机浏览器，设计理念。

目录：

　　分辨率

　　手机浏览器

　　设计理念(3S原则)

　　响应式Web开发

 

　　移动端开发的水很深啊，下面就上面目录这几项提及吧。

分辨率

　　手机分辨率要比PC分辨率庞杂的多，各类尺寸，各类比例。主要考虑一下两个方向

　　1）主流分辨率。经调研发现，目前主流手机分享率为：240*320像素，320*480像素，480*800像素（居多），640*960像素（居多），480*854(9:16)像素（少），1280*720像素（多），1280*800像素，1920*1080。这个我想最好有数据分析部分来看。

　　2）目标群所持设备分辨率。 经过本身网站的统计代码统计获得的结果。这个比1更重要，决定了你将作的产品如何设计。

     视网膜屏幕的评定标准是分辨率超过300ppi。

　　由视网膜屏幕又带来一个新的概念：“设备像素”。有关这方面的研究，见《视网膜New iPad与普通分辨率iPad页面的兼容处理》。

手机浏览器

    国内手机浏览器，主流有UC浏览器，QQ浏览器，海豚浏览器，百度浏览器等都是基于Webkit内核，对HTML5&CSS3支持都很好，因此大胆的使用吧。

设计原则（3s）原则

  Simple、Small、Speedy.《Mobile Web Design: Best Practices》。

 Speedy实际上是Simple, Small的结果。页面简单，代码小，天然速度就快起来了。

  Web设计方面，简约风格：便捷的操做、清爽的界面、友好的提示、少而小的图片、精简的代码等，当作到了这些，相信网站会变得Speedy。

    移动web开发应该把手机的固有特性优先考虑。首先，手机屏幕相比桌面屏幕很小，因此满屏可显示的内容很少，这就要求咱们在页面设计的时候选择好适当的字号，还得考虑文档内容的优先次序，把重要内容靠前显示；其次，手机的交互方式让咱们得去从新考虑页面元素的设计。桌面web以鼠标操做为主，这样可操做的范围很精确，移动web以触控操做为主，手指的操做范围比较宽泛，反映在页面上，我以按钮为例，对于小屏幕低分辨率的手机来讲，能够把按钮设置为.button{display:block;}，而对于大屏幕高分辨率的手机，能够设置为.button{display:inline-block;}，这是按钮。对于连接列表，要设置适当的行高，避免可点击的范围过小而操做失误；最后，图片。手机开发应尽可能避免图片的使用，像圆角、阴影、渐变等之前在桌面很差实现的状况，在手机开发上已经不存在了，彻底能够采用css3来实现，因此设计师在设计psd效果图的时候，就把效果作出来，但切图的时候就没必要给出。

 响应式设计

见个人另外一篇文章 【media-queries】媒体查询，为了响应式设计而生