移动端前端开发与PC端比有哪些不一样？

1，移动端在布局跟js效果方面，与PC端有什么不一样

先说布局方面：
PC端我们最经常使用的就是固定宽度980px（也有960，1000,1200），而后水平居中

width:980px;margin:0 auto;

但移动端就不能这么用了，由于不少网页都是能够横屏看，也能够竖屏看；不少屏幕的分辨率不同；
因此只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；若是是只针对移动端的项目，我平时主要想到的是320px宽 到 750px宽的兼容

而后是js方面，这个你应该问的更详细一些，由于有没有canvas对js影响很大；
第1、普通移动端网页（好比手机新浪网，手机淘宝，手机百度等）
这个在js方面和PC端区别不是太大；
主要的区别在于移动端没有了鼠标悬停（onmouseover）；点击（onclick）还能够用；
多了触摸、滑动（这里我没本身写过原生的，只会用一些插件）
我经常使用的移动端插件：
TouchSlide 触屏滑动特效插件 大话主席
Touch.js
Swiper中文网
第2、canvas相关游戏
canvas相关的html5增长了好多js，不过我不作游戏方面，因此就很少废话了；

2，兼容性方面有哪些常见的坑要避免

这个和第一个、第三个都有重复，你再问的详细些吧；

3，如何适配不一样的分辨率和屏幕尺寸

我说下我经常使用的（有任何不对的地方请大神指正）
原来没有iPhone6和iPhone6 plus时，设计图是640px宽的，
切图的时候就按照设计图正常切图；（按照标准的话，这里切图原本应该分红两种，一种是320px宽一倍图，一种是640px宽的二倍图；而后普通屏幕用一倍图，retina视网膜屏幕用 @2x 二倍图，但是咱们的设计师太懒了，只给我一个640px宽的二倍图，这里求大神指教该怎样才能符合标准）
不过最后写css的时候，不要按照640px写，要按照320px写；全部图片和全部html标签的尺寸都要减半；若是图片img在设计图上的宽度是80px，css就要

width:40px;

若是一个按钮设计图上宽100px，你的css就要

width:50px;

后来有了iPhone6和iPhone6 plus，设计师给的设计图就变成了750px，按说由“二倍”变成了“三倍”，可是咱们的设计师比较懒，不肯费事，因此如今个人解决方案仍是按320px宽，img和全部html标签css减半处理；

4，如何测试

我最经常使用的是chrome的手机模拟器；
右键-审查元素（或F12），developer tools出来后，点击左上角那个手机；

5，哪里有完整项目的开发视频能够学习

完整项目的开发视频我尚未见过，我比较喜欢在慕课网上面看一些html5和css3的知识点；
劝你有时间的话尽可能接实战项目吧，别总看视频，作一个项目比看多少视频都有用；


650px也能够的，只要是在640px-750px均可以；
下面是我经常使用的html和body的css；
至于em和rem，我认为只有在单屏的app上面（不出现滚动条那种）；只要是出现滚动条的正常页面，就仍是用百分比和像素px吧；

html{height:100%;font-size:62.5%;-webkit-text-size-adjust:none;}body{height:100%;
max-width:750px;min-width:320px;margin:0 auto;color:#6b6b6b;padding:0;font:normal 1.2em/1.6 
Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",
sans-serif;background-color:#f5f5f5;}