移动开发基础

1，屏幕小；

2，触摸交互；

3，屏幕尺寸多；（uiiiuiii.com/screen）

4，浏览器对H5的支持非常友好；

APP简介

针对移动端的开发，一般都是APP开发，常见的APP开发主要分为以下三种：

1，Native app：原生app

2，Hybird app：混合app

3，Web app： 网页app

原生APP

Native App是一种基于智能手机操作系统如iOS、Android、鸿蒙、WP并使用原生编程语言缩写运行的第三应用程序，也叫本地App。一般使用的开发语言为JAVA、C++。

优势：

1，直接调用底层硬件设备的功能，可以做更强大的事情；

2，用户体验非常的友好，尤其是在做手游方面；

3，用户的黏度非常的高，使得用户不容易流失；

4，给用户推送信息；

劣势：

1，不能跨平台，导致开发成本高（维护几套产品）；

2，推广难；

现在互联网企业里面的产品线：

1，PC端较少（企业官网）；

2，H5端很多；

3，小程序应用；

4，原生App（小程序的入口受制于其他平台的限制）

注意：原生App里的有些功能，是内嵌的HTML网页。甚至可以理解App里某些页面就是HTML网页，这个App可以理解为没有菜单栏的浏览器。因此，作为前端开发工程师可能需要与App开发人员对接。


Web App

WebApp一般是指移动端的网页应用，运行于浏览器上，基于网页技术开发实现特定功能的应用。它使用的技术无非就是HTML5、CSS3、Javascript，WebApp。这种类型的App通过网址访问，不能像客户端那样向用户推送数据。

优势：

1，跨平台，开发成本低；

2，用户操作简单，只需用浏览器就可以访问；

劣势：

1，只能做些简单的功能，无法调用底层硬件（如调用摄像头实现扫一扫）；

混合App

Hybrid App（混合模式移动应用）是指介于WebApp和Native-App这两者的App，兼具“Native-App良好的用户交互体验的优势”和“WebApp跨平台开发的优势”。

目前混合App技术：Uni-App技术，前端开发人员通过Html5+Css3+JS，就可以开发出来Android、苹果、各类小程序、H5端网页。 开发和维护成功都较低。  

屏幕（Screen）

移动设备与PC设备最大的差异在于屏幕，主要体现在“屏幕尺寸”和“屏幕分辨率”两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕“对角线的长度”（一般用英寸来度量，1Inch=2.54cm），如下图所示；

tongji.baidu.com/research/app

分辨率一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如：1920*1080，指的是屏幕垂直方向和水平方向分别有1920和1080个像素点。

长度单位

在开发中，我们也会用到各种单位，例如px（像素）、pt（点）、dp、em、rem等，我们最常用px作为长度单位。  

我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位；

像素

像素（px是由picture element合成的）是构成图像的小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方块的颜色和位置就决定该图像所呈现出来的样子。  

像素密度（ppi）

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较觉常见。

如下图所示，利用勾股定理，可以计算机得出PPI

PPI值越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。Retina即视网膜屏幕，苹果注册的命名方式，意指具有较高PPI（大于320）的屏幕。


思考：在屏幕尺寸固定时，PPI和像素大小的关系？  

结论：屏幕尺寸固定时，当PPI越大，像素的实际大小就会越小，当PPI越小，像素实际大小就越大。  


问题：那么，像素到底是一个绝对单位，还是一个相对单位？  

px 也常被称为 CSS 像素（设备独立像素）。它是一个绝对单位，但也可以被视为相对单位，因为像素单位相对的是设备像素。在同一个设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的；在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。


设备独立像素

设备更新，出现了不同PPI的屏幕共存的状态，像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上显示的大小不一样。

假设你设计了一个163*163的蓝色广场，在PPI为163的屏幕上，方块看起来正好是1*1In大小，在PPI为3326的屏幕上，这个方块看起来就只有0.5*0.5In大小了。

物理像素/设备独立像素的值，称为“设备独立像素比”，像素比的出现，使得待显示信息在不同物理分辨率终端下，看到的大小不一致。  

普通屏：一个CSS像素占据1个物理像素；

高清屏：一个CSS像素占据4个（或9个，或更多）物理像素；

所以出现了象素比和倍屏的关系：

像素比是1，就叫普通屏幕；

像素比是2，就叫2倍屏；

像素比是3，就叫3倍屏；