您现在的位置:首页 >> 前端 >> 内容

关于前端在PC端与移动端中的区别对比

时间:2018/6/26 15:01:46 点击:

  核心提示:1、PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配...

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

2、事件处理部分,移动端需考虑触摸事件,另弹出的手机键盘该如何处理

3、移动端需实现布局自适应。可使用em(相对父元素字体的大小,即父元素font-size=18px,1em=18px),rem(相对根元素字体大小),vw

4、在动画处理上,PC端由于要考虑到IE的兼容性,通常用JS做动画的通用性会好一些,但相比CSS3却牺牲了较大的性能,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3,既简单,效率又高

5、微信端文章分享的接口,title、description、以及icon图标的配置需要进行了解

6、百度地图的API

7、一般pc用jquery,移动端用zepto

—引用自纯CSS3使用vw和vh视口单位实现自适应(文章详细介绍了vw的使用)

视口(源自Peter-Paul Koch (江湖人称“PPK大神”)的理论):

PC端:指浏览器的可视区域

移动端:则包括Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。

视口单位( Viewport units )中“视口”:

PC端:浏览器的可视区域

移动端:Layout Viewport(布局视口)

根据CSS3规范,视口单位主要包括以下4个:

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

作者:网络 来源:xiaobaixia