移动端web开发

领导要求公司网站要做个移动版，查找相关的资料，以下简单的总结供领导看。

 

在用户访问的时候，先判断下是pc端还是移动端，是移动的话就是来访问移动端web页面。当然的也可以做成pc端和移动端都通用的，但在做的过程中一定会遇到很多问题，一次就做成这样，心里没有太大的把握。就是先做一个，总结一下经验。

1.先从网站整体的布局来讲，整个采用流体布局，不设定固定宽度，百分比宽度（目标元素宽度/上下文元素宽度=百分比宽度）+容器浮动，字体大小采用em，到时候有些地方我们根据不同的分辨率的手机做几个样式，整个网站的内容要减少一些，主要都展示出来就可以。
/* iPad及以下，所有小于（不等于）960宽度的平板电脑*/
@media only screen and (max-width: 959px) {}
/* 仅iPad竖版，所有小于（不等于）960宽度的平板电脑的竖版*/
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* iPhone及以下*/
@media only screen and (max-width: 767px) {}
/* 仅iPhone横版，包括某些平板电脑的竖版*/
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* 仅iphone4 竖版*/
@mediaonly screen and (max-width: 479px) {}

2.首页的幻灯现在有两个实现的方式，
一种才用淘宝ued开发的一个slide，这个是一句yui开发的，这样的话整个js这块就都要考虑用这个yui来做。
http://jayli.github.com/gallery/yuislide/
还有一种就是使用iscroll-4（iscroll4是一款针对web app使用的滚动控件，这个在谷歌浏览器就能直接预览使用效果），中间有幻灯这块，其他的相关实现方式也都有，使用他的话就真的把整个项目都做成pc和移动都通用的。
http://cubiq.org/iscroll-4

3.最主要的是怎么加载数据，一种就是还是用原来的网站开发语言去做，另一种就是采用用原来的开发语言返回一个JSON数据，前端页面用ajax，我了解的移动web应好像是用的ajax做的

 

相关学习记录
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
自适应网页设计（Responsive Web Design）

http://www.w3cplus.com/source/responsive-resources-strategy.html
Responsive Design资源之一：学习线路

http://www.flickr.com/photos/zhangsj/6126931247/
图片相关的问题可以参考

Media Query的语法比较复杂，这里个大家推荐一个工具，可以方便的设计布局，并可以针对各种设备自动生成Media Query的语句：

http://www.responsivewebcss.com/