自己做公司产品的移动站已经有好几个月，在做前端开发中，遇到的点，整理如下。
开发前：
1，需要知道页面的宽度的适应范围，这个涉及到你的测试结果。首先你要明确产品的定位，是适应绝大多数手机，平板，还是全部适应。
这个可以借鉴几大电商网站的移动产品，例如淘宝的http://m.taobao.com/,易讯的http://m.51buy.com/，这些都是适应320px-960px范围内，屏幕自动适应。
2，确定你的开发工具，绝大多数人使用的当然是DreamWeaver，推荐使用Notepad++。你在电脑端浏览器查看你的移动站时，
请使用google浏览器，有的移动站在其他浏览器下就是一堆乱。
3，测试工具。刚开始我们准备使用android模拟器，但是实在太卡，后面申请测试手机。而且是安卓和苹果各一个（因为本公司这个两个系统访问较高），大家的视情况而定。
你想我测试是不是都是在手机上，当然不是。我用的一个简洁方法是，直接缩小浏览器，观察页面位置是否有乱。确定之后才会发布测试环境，这样效率比较高。
开发中遇到的几个点：
1，图片不清晰问题。
刚开始在电脑上看图片绝对的清晰（使用PNG格式），放在手机上看，图片比较模糊。这个问题一度头疼，在观察了别人网站之后，都是使用了css3.0中的background-size来解决这个问题。
具体的解决办法：
1.1尽可能的使用JPG图片；
1.2原图最好是你所想展示图片的两倍（选择两倍大小事因为，在手机上看的比较清晰，网站不会太卡）
1.3样式写法：background-size:34px 34px;-webkit-background-size:34px 34px;
2，样式中的问题：
字体。你按照设计的字体大小写样式，在电脑端看着比较合适舒服。但是手机上就是比电脑上几乎大两倍。我推荐大家使用em的写法，就是夫级字体大小的多少倍。
font-family，最好不要使用中文去写，使用应为'microsoft yahei'；
3，移动站中的布局问题：
3.1肯定会遇到一个布局问题：在一行上，有一个元素是不定的，一个元素的宽和高是确定大小的。你会想那我对不定的元素，使用百分比，不可以吗？
当然可以，但是这只能在某一个尺寸下布局是最合适的。我的解决办法是合理的使用css样式。
例如
这个就是我说的上面的情况;
这个结构的html代码时：
<div class="pro_img"> <img src="http://resource.okhqb.com/thumbs/product/d6/85/d685f4d4be2ddfab8926a455a1fe3f49.100.jpg"> </div> <div class="pro_info "> <p class="pro_tt">Apple/苹果 iPhone5s 品牌手机 土豪金/64G 港版</p> <p class="pro_tt_sec"></p> <div class="ok_pri">¥ <em>6999.0</em></div> <p class="amout"> 销量：<span class="sales" style="color:#f00;">2516</span>| 评价：<span class="rates" style="color:#f00;">1258</span></p> </div>
对应的css
.mobile_body .cata_cnt .order_pro_list li .pro_item {
display: block;
height: 150px;
overflow: hidden;
width: 100%;
}
.mobile_body .cata_cnt .order_pro_list li .pro_img {
background-color: #FFFFFF;
border-radius: 5px;
float: left;
font-size: 0;
height: 100px;
line-height: 98px;
margin: 15px 0 0;
overflow: hidden;
text-align: center;
width: 100px;
}
.mobile_body .cata_cnt .order_pro_list li .pro_info {
margin-right: 10px;
overflow: hidden;
padding-top: 17px;
position: relative;
}
.mobile_body .cata_cnt .order_pro_list li .pro_info .pro_tt {
color: #3E3E3E;
font-size: 1.09em;
font-weight: bold;
height: 35px;
line-height: 18px;
margin: 0;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
}
大家可以看看我红色标出的属性：可以做产品图片左浮动，右边的产品介绍不会超出。产品标题会自动换行，word-break: break-all;（断开英文单词） word-wrap: break-word;（允许长单词换行到下一行：）
3.2使用ａ标签，如果使用ａ标签请在ａ标签有内容，不然，在苹果系统上将没有反应。
４，大量使用CSS3
在此次得开发中使用了大量的css3的样式。例如 box-shadow,border-radius,transform,:before,:after等属性。放心大胆的使用css3，不需要再担心IE6不兼容了。
5，在js方面
在手机上，大多都是依靠点击，滑动的交互方式。在产品详情页面，有一个产品图片滑动的效果，但是苹果支持不是很好，你需要下载一个支持触摸操作的库。其余的操作可以依靠jquery完成。
6.遇到问题不知道怎么办
在互联网如此发达的今天，去看看同类型的网站是如何做到的，或者去国外网站看看。没有做不到的。
