前言：
路靠自己走，就算再坎坷，也要自己过
--------------------------------正文---------------------------------
app
Native App 原生App
java 安卓
oc ios
优势
性能高
可以调用底层功能
劣势
不能跨平台
最少需要两个团队
开发周期长
维护难
开发成本高
Web App WebApp
移动端页面，包了一个壳子变成app
优势
可以跨平台
一个人搞定
开发周期短
维护简单
开发成本低
劣势
性能相对原生差
调用不了底层功能
Hybird App 混合App
webview
phonegap
APICloud
Ionic
RN
HBuilder
移动端页面
移动端
phone pad watch tv
移动端和pc的区别：
没有什么区别，pc怎么写，移动端就怎么写,只不过尺寸不一样
PC
浏览器之间的兼容
移动端
各种设备尺寸的兼容
移动端比pc难?
移动端比pc简单。
设计给的图一般都是二倍图或者三倍图
320 640
375 750
414 828
移动端测试
1.Chrome浏览器自带模拟器
2.真机测试
移动端需要设置视口：（viewport）
页面的尺寸
初始分辨率
能否缩放
最大缩放
最小缩放
eg:
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
emmet:
meta:vp
移动端布局有很多种方式
定宽
百分比
弹性
rem
响应式
弹性
盒子模型
width/height+padding+border
old
大小不够，往外撑
box-sizing: content-box;
new
大小不够，往里挤
box-sizing: border-box;
calc 计算
calc( 20% - 2px )
弹性盒子 flex-box
开启弹性
给父级加
display: -webkit-flex;
display: flex;
子级默认分配位置
-webkit-flex: 系数;
flex: 系数;
flex-方向
flex-direction: row|row-reverse(横反转)|column|column-reverse(列翻转)
flex-wrap(换行)
flex-wrap: nowrap|wrap|wrap-reverse
justify-content(水平排列)
center|flex-start|flex-end|space-around|space-between
align-items(垂直排列)
center|flex-start|flex-end|baseline
rem 单位
em 当前元素的字体大小
rem 根字体大小
html的字体大小
算尺寸：
基准rem/基准宽度=新rem/新宽度
? = 基准rem/基准宽度*新宽度
