一、app
Native App 原生App
java 安卓
oc ios
(1)优势
性能高
可以调用底层功能
(2)劣势
不能跨平台
最少需要两个团队
开发周期长
维护难
开发成本高
(a)Web App WebApp
移动端页面,包了一个壳子变成app
(1)优势
可以跨平台
一个人搞定
开发周期短
维护简单
开发成本低
(2)劣势
性能相对原生差
调用不了底层功能
(b)Hybird App 混合App
webview
phonegap
APICloud
Ionic
RN
HBuilder
二、移动端页面
(1)移动端
phone pad watch tv
(2)移动端和pc有什么区别吗?
没有什么区别,pc怎么写,移动端就怎么写,只不过尺寸不一样
PC
浏览器之间的兼容
移动端
各种设备尺寸的兼容
(3)移动端需要设置视口
viewport
页面的尺寸
初始分辨率
能否缩放
最大缩放
最小缩放
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
emmet:
meta:vp
(4)移动端布局有很多种方式
定宽
百分比
弹性
rem
响应式
三、弹性
(a)盒子模型
width/height+padding+border
(1)old
大小不够,往外撑
box-sizing: content-box;
(2)new
大小不够,往里挤
box-sizing: border-box;
(b)弹性盒子 flex-box
(1)开启弹性
给父级加
display: -webkit-flex;
display: flex;
(2)子级默认分配位置
-webkit-flex: 系数;
flex: 系数;
(3)flex-方向
flex-direction: row|row-reverse|column|column-reverse
(4)flex-wrap(换行)
flex-wrap: nowrap|wrap|wrap-reverse
(5)justify-content(水平排列)
center|flex-start|flex-end|space-around|space-between
(6)align-items(垂直排列)
center|flex-start|flex-end|baseline