1、NativeApp原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C
2、HybridApp混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用
3、WebApp基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name=“viewport”来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下：
......图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：流体布局+响应式布局2、移动端适配：
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。
**calc()**可以通过计算的方式给元素加尺寸，比如：width：calc(25%-4px);
**box-sizing**1、content-box默认的盒子尺寸计算方式2、border-box置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码如下：
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
配置参数参数配置文件：SublimeText->Preferences->PackageSettings->cssrempx_to_rem-px转rem的单位比例，默认为40。max_rem_fraction_length-px转rem的小数部分的最大长度。默认为6。available_file_types-启用此插件的文件类型。默认为：[".css",".less",".sass"]。
flex-direction:row|row-reverse|column|column-reverse确定子元素排列的方向
flex-wrap:nowrap|wrap|wrap-reverse元素超过父容器尺寸时是否换行
flex-flow:flex-direction|flex-wrap同时设置flex-direction和flex-wrap
justify-content:flex-start|flex-end|center|space-between|space-around子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式
align-items:flex-start|flex-end|center|baseline|stretch子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch设置多行子元素在行方向上的对齐方式
2、条目属性flex:none|<'flex-grow'><'flex-shrink>'||<'flex-basis'>同时设置flex-grow和flex-shrink以及flex-basis
flex-grow：number表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例
flex-shrink：number当父元素的空间不足时，各个子元素的尺寸缩小的比例
flex-basis：length|percentage|auto|content用来确定弹性条目的初始主轴尺寸。
align-self：auto|flex-start|flex-end|center|baseline|stretch覆写父元素指定的对齐方式