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

布局方面：

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

width:980px;margin:0auto;

但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样；

所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；如果是只针对移动端的项目，我平时主要考虑的是320px宽到750px宽的兼容；

js方面

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

第一、普通移动端网页（比如手机新浪网，手机淘宝，手机百度等）

这个在js方面和PC端区别不是太大；

主要的区别在于移动端没有了鼠标悬停（onmouseover）；点击（onclick）还可以用；

多了触摸、滑动（这里我没自己写过原生的，只会用一些插件）

我常用的移动端插件：

TouchSlide触屏滑动特效插件大话主席

Touch.js

Swiper中文网

第二、canvas相关游戏

canvas相关的html5增加了好多js，不过我不做游戏方面，所以就不多废话了；

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

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

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

我说下我常用的（有任何不对的地方请大神指正）

原来没有iPhone6和iPhone6plus时，设计图是640px宽的，

切图的时候就按照设计图正常切图；（按照标准的话，这里切图本来应该分成两种，一种是320px宽一倍图，一种是640px宽的二倍图；然后普通屏幕用一倍图，retina视网膜屏幕用@2x二倍图，可是我们的设计师太懒了，只给我一个640px宽的二倍图，这里求大神指教该怎样才能符合标准）

不过最后写css的时候，不要按照640px写，要按照320px写；所有和所有html标签的尺寸都要减半；如果img在设计图上的宽度是80px，css就要

width:40px;

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

width:50px;

后来有了iPhone6和iPhone6plus，设计师给的设计图就变成了750px，按说由“二倍”变成了“三倍”，但是我们的设计师比较懒，不愿费事，所以现在我的解决方案还是按320px宽，img和所有html标签css减半处理；

4，如何测试

我最常用的是chrome的手机模拟器；

右键-审查元素（或F12），developertools出来后，点击左上角那个手机；

5，哪里有完整项目的开发视频可以参考

完整项目的开发视频我还没有见过，我比较喜欢在慕课网上面看一些html5和css3的知识点；

劝你有时间的话尽量接实战项目吧，别总看视频，做一个项目比看多少视频都有用；

从这几方面区别：

1、手机网站界面风格

移动网站页面风格整体强调统一，这种需要保持网站在设计风格中采用色彩搭配。界面整洁和简洁，让网站整体看起来赏心悦目。网站导航功能简单明了，还有就是做好网站在移动端的兼容性问题。

2、网站交互式优化

手机端网站，特别是移动网站在浏览页面需要使用手动的形式。这不同于PC网站的外接设备。交互式功能优化就需要变得很简单，保证用户在各个页面之间来回切换。

3、手机网站适配优化

现在都强调移动端和PC端网站同步更新和一键操作。这就需要网站做好适配的工作。适配优化过程中还必须做好横竖屏适配功能，同时为了提高横竖屏识别精准度。在百度站长-移动适配-按照提示来操作就可以了。

4、手机网站内容优化

移动端网站优化特别是内容优化不同于PC网站内容丰富度。因此，移动网站就强调网站的简洁，重点做下用户喜欢的内容，用户最感兴趣，充分表达出网站内容的核心价值和传递给用户的价值信息。

5、移动站点辅助工具

移动站点强烈推荐的是：在线咨询，电话咨询，在线留言，表单数据等。这点很有必要，如果网站缺少这种东西，就会变成网站价值不存在。因此，这些辅助工具要保证正常运行。

6、手机网站加载优化加载问题

虽然现在人们上网环境和网速已经变得越来越快，然而，在移动网站打开速度已经是一种难题，如果网站打开速度过慢就会导致网站加载速度问题，因此，在进行移动网站尽可能保持压缩，这样让网站保持良好的加载速度。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com