前端开发中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的知识点;

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

温馨提示:答案为网友推荐,仅供参考