Question

前端开发中pc端和移动端的区别

Answer 1

前端开发中PC端和移动端网站的区别，主要是：
1、PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化；

2、在部分事件的处理上，移动端自然是偏向于触屏的，另外包括移动端弹出的手机键盘该如何处理，这样的问题在PC上肯定不会遇到，但在移动端，如果你没有经验，处理起来是相当麻烦的；
3、布局上，移动端开发是要做到页面布局自适应的，而PC端页面布局的比例会相对固定；
4、在动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。
总结：以上是移动端和PC端比较突显的区别，在实际的开发应用过程中，还会有更多的差异化区别。

Answer 2

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

width:980px;margin:0 auto;

但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样；
所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；如果是只针对移动端的项目，我平时主要考虑的是320px宽 到 750px宽的兼容；

js方面

这个题主你应该问的更详细一些，因为有没有canvas对js影响很大；

第一、普通移动端网页（比如手机新浪网，手机淘宝，手机百度等）
这个在js方面和PC端区别不是太大；
主要的区别在于移动端没有了鼠标悬停（onmouseover）；点击（onclick）还可以用；
多了触摸、滑动（这里我没自己写过原生的，只会用一些插件）
我常用的移动端插件：
TouchSlide 触屏滑动特效插件 大话主席
Touch.js
Swiper中文网

第二、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的知识点；
劝你有时间的话尽量接实战项目吧，别总看视频，做一个项目比看多少视频都有用；

Answer 3

前端开发中PC端和移动端网站的区别，主要是：PC端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化。

拓展：

1、PC (personal computer)，个人计算机一词源自于1981年IBM的第一部桌上型计算机型号PC，在此之前有Apple II的个人用计算机。个人计算机由硬件系统和软件系统组成，是一种能独立运行，完成特定功能的设备。硬件系统：是指计算机的物理设备如电源、主板、CPU、内存、硬盘等等。l软件系统：是指为方便使用计算机而设计的程序，软件系统包括系统软件和应用软件。系统软件指的是主要用于控制和管理计算机资源的程序，如操作系统、编译系统等。应用软件指各种可以运行在操作系统中的程序，如游戏软件、工作软件等。

2、移动依托铁通发展自己的有线宽带的同时，发展移动有线通，是移动在08年电信业重组之后与广电合作推出的一种有线宽带上网业务。移动为了和电信联通进行有线宽带服务的竞争，推出了这个业务。移动有线通是针对家庭用户或企业提供的基于双向有线网络的宽带接入服务。当然移动有线通是针对有线上网提出的，移动很早就开办了无线上网业务如：手机上网、3G上网、WLAN（WIFI)，有线通的推出也使人们多了一种上网运营商的选择。　

Answer 4

那么首先你要了解移动端web开发和PC端web开发的特点区别在哪儿？就影响前端的两个最大的特点就是——1）网络特点：PC端带宽高，网络连接相对稳定；而移动端带宽低，网络不稳定，间歇性连通。2）分辨率：PC端分辨率相对固定（1440*900）；而移动端不同手机品牌甚至同一品牌手机不同型号，分辨率差别都很大。
所以我们就先从这两个方面说。在分辨率上，首先你要了解现在web前端开发，响应式页面布局设计给我们带来的方便。其次针对PC端，我们可以使用像素（px）来做为元素宽高的单位，但是对于移动端，我们通常会使用百分比（%）来做。对了记着在头部加上这句话：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
在加载上，移动端尤其要注意，隐形加载，按需加载等加载方式，还有尽量处理和解决重定向问题，异步加载第三方等等...（这都属于移动web前端开发的优化问题）