手机端网站制作总结

1、访问地址：
公司网站

2、概括：
公司移动端网站制作主要借助的外部插件是jquery mobile[实际制作中用的并不多]，与PC端采用同一个数据库，因为一个栏目无法同时绑定一个以上的模板，因此文章信息分属于不同的栏目，即新建了一个移动端的子站点，移动端与PC端输入相同的域名www.lanxum-edu.com即可根据设备判断跳转到指定的页面。

3、制作过程中的注意事项
（1）尺寸
当初按照设计师给的尺寸640*1136制作的，结果发现比例太大了，如下图：

最后的解决方案是在原有尺寸上长宽皆缩小一半[个别地方比如banner、间距没那么严格缩小]，结果就好看多了，这里没有截图。
在以后的设计过程中建议按照320*640的尺寸设计，banner图可以做成640*1136的。

（2）单位
px、em、rem
刚开始用的是px，但是px不会根据浏览器的大小进行缩放；
em可以，不过它是根据父级元素进行调节的，如果定义了全局的em大小，比如body{fong-size:62.5%;},那么1em=12px；如果定义了一个父级元素的字体大小，font-size:2em；那么这个父容器下面的em参照值就变成24px了，比较麻烦；
最后用的是css3 的一个单位：rem—rem是相对长度单位，相对于根元素，只要定义根元素的值就可以了。考虑到chrome浏览器的最小字号我设置的rem相对值为html{ font-size:75%;}，也就是1rem=12px。
单位转换：http://pxtoem.com/

（3）图片
除了banner图，其他图片或者图标我都缩小了大约一半，图片宽度都是100%；发布文档的时候移动端图片上传成功之后记得把宽度改为100%；

展示效果：

如果图片比较小就不用设置100%了。比如成功案例：

（4）banner轮播图

这里比较浪费时间，测了好久，想实现的效果就是不论浏览器尺寸如何改变都能实时的改变图片大小以及滚动距离，当初用的是jqm提供的横屏方法：

$(window).on("orientationchange",function(event){
  alert("方向是：" + event.orientation);
});

在测试后的时候我手机宽高计算不准确无法给轮播赋值，最后用的jq resize方法，这样不论浏览器尺寸如何改变包括在PC端测试的时候都能等比例缩放，缺点就是在轮播间隔的那段时间改变尺寸的话不能及时缩放，下一次轮播运行之后就正常了，原因主要是因为我给了固定宽度，不给固定宽度的话就会实时的改变大小，后期会改进。。。（见最后）

4、其他
使用jqm自带的东西比较少，只使用了菜单弹出效果和左滑动（swipeleft）与右滑动（swiperight）方法，以后制作手机网站可以考虑不使用jqm，改用zepto，后者体积更小打开更快，也没有重复加载上一个页面的问题。

制作过程中我只测试了iphone4 safari浏览器和Android chrome浏览器，希望大家可以用自己的手机都测试一遍，不好的地方再做修改。

————————————–更新——————————————————–

今天解决了图片轮播的问题，原来的思路是每次改变浏览器的宽度都要重新获取固定宽度，然后再把包含图片的容器设置成改变之后的宽度，同时图片滚动距离也相应改变，这样做太麻烦了，每次改变都要获取固定宽度，后来用的方法就是不获取固定宽度，全都是用百分比，代码要比文字说得清楚：

原来;

hdpSlide()函数中传进来的是变化之后的宽度（还是两个值。。。。。。）

现在：

根据li的个数设置父容器的宽度为n*100%；（100/n）%就是图片的宽度，这样容器与图片宽度始终都是百分比，随意更改浏览器尺寸都会实时的缩放，实时改变滚动距离。