从0开发移动端界面

从0开发移动端界面

互联网的发展,科技越来越发达，人与人之前沟通的距离越来越近，随着电子设备的发展,我们可以上网的工具越来越多,手机这几年发展日新月异,手机移动端-网页也迎来了爆发期。

1. 手机品牌介绍（不同手机,不同尺寸）

2. 手机浏览器品牌

3. 规划移动端开发

4. 移动端插件推荐

一、手机品牌介绍

近年来手机可以分为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 阿里手淘团队出的框架

结语：科技改变世界,技术让世界更美好。