移动端前端开发与PC端比有哪些不同?
1、pc端有ie,chrome,ff 内核兼容问题移动端,简单来说兼容问题相对较少。但是移动端要做好多分辨率的处理。移动端所有图片和所有html标签的尺寸都要减半。
2、移动端在布局跟js效果方面,与PC端有什么不同:
先说布局方面:
PC端最常用的就是固定宽度980px(也有960,1000,1200),然后水平居中 width:980px;margin:0 auto;但移动端就不能这么用了,因为很多网页都是可以横屏看,也可以竖屏看;很多屏幕的分辨率不一样;
所以只要牵涉到移动端,就要牵涉到响应式(也叫自适应);如果是只针对移动端的项目,我平时主要考虑的是320px宽 到 750px宽的兼容;
js方面:(有没有canvas,对js影响很大)
第一、普通移动端网页(比如手机新浪网,手机淘宝,手机百度等)这个在js方面和PC端区别不是太大;主要的区别在于移动端没有了鼠标悬停(onmouseover);点击(onclick)还可以用;多了触摸、滑动(会用一些插件)。
第二、canvas相关游戏canvas相关的html5增加了好多js;
3、手机游览器可能不兼容css3的属性,这时你可以使用以下代码来加强你代码的健壮性
(1)@media screen and (max-width: 355px) { //宽度小于355px时
…
(2)我们的处理方法是在使用calc()的上面写上普通的样式,例如:width:95%;
width:calc(100% – 10px);
width:-webkit-calc(100% – 10px);
width:-moz-calc(100% – 10px);
当游览器无法读取样式时会使用最上面的widht:95%;这样会与实际设计稿有些许出入,所以使用时谨慎对待~ //添加属性
}