从0开发移动端界面
互联网的发展,科技越来越发达,人与人之前沟通的距离越来越近,随着电子设备的发展,我们可以上网的工具越来越多,手机这几年发展日新月异,手机移动端-网页也迎来了爆发期。
手机品牌介绍(不同手机,不同尺寸)
手机浏览器品牌
规划移动端开发
移动端插件推荐
一、手机品牌介绍
近年来手机可以分为2部分,2010年以前的功能机为主,摩托罗拉(Motorola)、诺基亚(Nokia)、西门子(Siemens)、爱立信(索爱(Sony Ericsson))、RIM(黑莓)、多普达、飞利浦、夏普、松下、索尼、三星(Samsung)、 LG等; 2010年以后就是智能机的潮流,截至现在存活下来的国内大品牌有 华为、苹果、OPPO、vivo、小米、三星等,手机尺寸从 3.0- 4.5- 5.0- 5.1 -5.5- 5.6 -6.0以及到ipad等规格,带来更好的浏览效果。
二、手机浏览器品牌介绍
浏览器从电脑版延伸到手机版,手机国内主流浏览器有 安卓自带浏览器、chrome、uc浏览器、百度浏览器、QQ浏览器、360浏览器等safari等,
四大浏览器内核
1.Trident (IE浏览器) :因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
2.Gecko:( FireFox )优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
3.Webkit: ( Chrome/ Safari / UC )优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
4.Presto: ( 欧朋 ) Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。
移动端开发主要对象是手持设备,其中80%以上是IOS和Android系统,都是基于Webkit内核的浏览器.
三、规划移动端开发
面对不同尺寸的手机,需要对不同尺寸的手机进行适配,制定一些规范还是必要的。以下是我整理的一些规范和约定。
1、对不同的手机浏览器进行样式重置,尽量保证不同品牌的浏览器显示一致. 推荐使用 Normailze或自己定制手机端重置样式
2、对不同的手机尺寸进行适配,保证手机端显示一致 推荐使用 flexible阿里手淘团队出的框架,通过rem适应手机移动端产品或者使用其他集成框架 Framework7,MUI,amazeui等优秀的手机框架.
3、对项目整体结构进行整理,提出公用的部分可复用的代码,提高效率。
4、明白项目的需求,了解要兼容的浏览器, 尽可能少使用css3优秀的样式和html5元素,做好兼容性。
5、对于个别框架无法实现的需求,在需要引入其他框架的时候, 在需要的时候引入文件,做到不浪费资源
6、文件目录尽量清晰,代码多加注释,方便维护
四、移动端插件推荐
移动框架 zepto 优秀的移动端框架,比jquery更好的兼容性
移动框架 jquery 一个快速、简洁的JavaScript框架,Js开发最喜爱的框架
图片轮播 swiper一款免费以及轻量级的移动设备触控滑块的js框架 很好很强大
导航滚动 iScroll.js 一个高性能、轻量级、免费,跨平台的javascript库,有很强大的滚动功能
样式重置 Normailze 开源的样式重置框架
移动端弹窗 layuiMobile 为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层UI,提供了很好的提示窗口体验
移动端自适应框架 flexible 阿里手淘团队出的框架