前端pc端和移动端的区别?

1、兼容性
pc端需要考虑浏览器兼容性,移动端主要考虑屏幕分辨率和不同系统的兼容性。

2、页面布局
PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元素为基础)、rem(以根元素为基础)。

3、JS动画
移动端没有hover事件、增加了touch和touchSlide事件,需要处理键盘跳出与隐藏。考虑到性能,移动端使用的js库应尽量小。

4、开发调试
PC端用chrome后台调试,移动端大部分可以用chrome移动端模拟调试器,但有的功能还需要在手机上调试。

详解:
第一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。

第二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。

第三: 在布局上,移动端开发一般是要做到布局自适应的,我使用的一直是rem布局,感觉很好。

第四: 在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲, 而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3, 既简单、效率又高。

第五: 微信的一些接口组好能去实现一遍,熟悉一下肯定是有好处的,比如通过微信分享文章,title、description、icon等图标的配置,这些还是要会的。

第六: 百度地图的一些API接口,也得去实现一下,这些对于移动端来说,LBS是一个非常重要的特性,所以地图这块肯定是要了解的,在加上百度地图这块已经是一个比较成熟的平台了,所以学起来也比较容易。

第七: CSS3的动画一定要比较熟练,这在移动端用的还是比较多的。

第八: 一般pc端用jquery,移动端用zepto,因为移动端的流量还是比较重要的, 所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。
在这里插入图片描述
而未压缩的jquery是262kb, 压缩的jquey是83kb,可见两者的差别之大。

第九:最好能掌握一套完整的前端开发架构,比如模块化、打包、压缩、缓存、有条件的还可以做一下自动化测试等等,比较好用的有fis,另外,想要快速提升自己的前端开发技术,钻研前端架构这块是一个非常好的方向。

第十: 性能优化,包括首屏的打开速度、用户响应延迟、渲染性能、动画帧率等在手机上都需要特别注意。

第十一: 比如在手机上的300ms的延迟,这在PC端是没有的,如果我们希望做成webapp,那么自然就不需要这300ms的延迟,所以可以使用hammer-time.js来移除这300ms的延迟。

发布了26 篇原创文章 · 获赞 0 · 访问量 212

猜你喜欢

转载自blog.csdn.net/CKT0816/article/details/104780089