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

按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步,成为一个优秀的前端 ~~~ > o < ~~~

   PC端和移动端布局的区别

1.pc端没有触摸的各种事件,移动端有;移动端没有鼠标移入移出事件,但是pc端有

2.Pc端最常用的布局是固定宽度为980px(也有960px1000px1200px);而在移动端,因为有很多网页是可以横屏看也可以竖屏看,并且很多屏幕的饿分辨率都是不一样的,所以只要牵涉到移动端都要考虑用响应式布局

3.Pc布局考虑更多的是浏览器的兼容性,但是在移动端,考虑更多的是手机兼容性,因为手机的型号类型非常的多,导致屏幕的分辨率是不一样的

4.移动端触摸弹出的手机键盘处理也是在pc端不会遇到的问题。

5.移动端和pc端适用的js框架也是不一样

6.Pc端浏览器内核有很多,webkitGecko,。。。。,但是移动端的浏览器内核比较单一,基本都是webkit以及webkit相关的blink

7.Pc端的交互是鼠标,键盘的交互而移动端变成了触摸,手势的交互

    good good study     day day up!



转载了一篇文章,觉着应该好好整理一下 笔记了哦

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: PC端移动端前端代码的主要区别有以下几点: 1. 屏幕大小不同:PC端通常具有更大的屏幕,因此需要使用不同的布局和设计来适应不同的屏幕大小。 2. 触摸操作:移动端通常支持触摸操作,因此需要使用不同的交互方式来适应触摸操作。 3. 网络连接:移动端通常在移动环境使用,因此需要考虑网络连接的速度和稳定性。 4. 浏览器兼容性:移动端的浏览器兼容性比PC端的要低,因此需要考虑不同的浏览器对前端代码的支持情况。 5. 资源限制:移动端的设备通常具有更低的处理能力和内存容量,因此需要考虑如何优化前端代码以适应这些限制。 总体而言,开发PC端移动端前端代码都需要考虑不同的因素,因此需要为不同的设备制定不同的解决方案。 ### 回答2: 在写前端代码时,PC端移动端之间存在一些显著的区别。 首先,布局方面是有区别的。由于PC端拥有更大的屏幕空间,我们可以采用更为复杂的布局结构,如多列布局、大尺寸的图片等。而移动端由于屏幕尺寸有限,需要采用简洁的布局,更注重页面的垂直滚动。 其次,用户交互方式也存在差异。在PC端,我们使用鼠标来与页面进行交互,可以使用hover、click等事件来实现各种效果。而在移动端,用户主要通过触摸屏幕进行交互,因此需要通过触摸事件来实现相应的功能。 另外,移动端还需要考虑适配各种不同尺寸的设备。在PC端,我们可以设计固定宽度的页面,而在移动端,页面需要进行适配,以适应不同尺寸的屏幕。这需要使用响应式布局或者媒体查询等技术来实现。 此外,性能方面也是需要考虑的因素。移动设备的处理能力、网络状况等都相对于PC端有限,因此在移动端开发时,需要更加注重优化代码,减少不必要的请求和资源加载,以提高页面的加载速度和性能表现。 综上所述,PC端移动端在布局、用户交互、设备适配和性能优化等方面都存在明显的区别前端开发人员需要针对不同平台进行相应的优化和适配。 ### 回答3: 在写前端代码时,PC端移动端有以下几个区别。 1. 布局和设计:PC端屏幕相对较大,通常使用多列布局,而移动端屏幕较小,通常使用单列布局。此外,移动端需要考虑手势操作和触摸屏幕,因此需要更大的可点击区域和适应手指操作的设计。 2. 响应式设计:由于PC端移动端屏幕尺寸不同,需要采取响应式设计,使页面能够自适应不同屏幕大小。通过使用媒体查询和弹性布局来实现元素的动态调整和优化。 3. 页面加载速度:由于移动端网络环境相对不稳定,更需要注意页面的加载速度。因此,需要优化代码、压缩图片和资源,并尽量避免使用大型库或框架。 4. 功能和交互:由于移动端设备的特性,一些功能和交互方式可能与PC端不同。例如,移动设备有加速度计和地理定位功能,可以实现摇一摇或基于地理位置的交互。 5. 浏览器兼容性:不同的浏览器和操作系统在PC端移动端的兼容性也会有所不同,因此需要做好兼容性测试和兼容性适配,确保在不同设备上都能正常显示和运行。 总的来说,PC端移动端在设计、布局、响应式、加载速度、功能交互和兼容性等方面有一些区别前端开发人员需要根据具体情况进行相应的调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值