移動端app分類
1、Native App 原生app手機應用程序
使用原生的語言開發(fā)的手機應用鸠儿，Android系統(tǒng)用的是java，iOS系統(tǒng)用的是object-C
2、Hybrid App 混合型app手機應用程序
混合使用原生的程序和html5頁面開發(fā)的手機應用
3妨马、Web App 基于Web的app手機應用程序
完全使用html5頁面加前端js框架開發(fā)的手機應用
Viewport 視口
視口是移動設備上用來顯示網頁的區(qū)域，一般會比移動設備可視區(qū)域大杀赢，寬度可能是980px或者1024px烘跺，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條脂崔，為了避免這種情況滤淳，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看砌左，可以用 meta 標簽脖咐，name=“viewport ” 來設置視口的大小，將視口的大小設置為和移動設備可視區(qū)一樣的大小汇歹。
設置方法如下：
<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>
視網膜屏幕（retina屏幕）清晰度解決方案
視網膜屏幕指的是屏幕的物理像素密度更高的屏幕屁擅，物理像素可以理解為屏幕上的一個發(fā)光點，無數發(fā)光的點組成的屏幕产弹，視網膜屏幕比一般屏幕的物理像素點更小派歌，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕痰哨，它的物理像素點大小是一般屏幕的1/4,3倍的視網膜屏幕胶果，它的物理像素點大小是一般屏幕的1/9。
圖像在視網膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣斤斧，但是由于視網膜屏幕的物理像素點比一般的屏幕小早抠，圖像在上面好像是被放大了，圖像會變得模糊折欠，為了解決這個問題贝或，可以使用比原來大一倍的圖像吼过，然后用css樣式強制把圖像的尺寸設為原來圖像尺寸的大小，就可以解決模糊的問題咪奖。
PC及移動端頁面適配方法
設備屏幕有多種不同的分辨率盗忱，頁面適配方案有如下幾種：
1、全適配：流體布局+響應式布局
2羊赵、移動端適配：
- 流體布局+少量響應式
- 基于rem的布局
- 彈性盒模型
流體布局
流體布局趟佃，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值昧捷，流體布局中闲昭，元素的邊線無法用百分比，可以使用樣式中的計算函數 calc() 來設置寬度靡挥，或者使用 box-sizing 屬性將盒子設置為從邊線計算盒子尺寸序矩。
**calc() **
可以通過計算的方式給元素加尺寸，比如： width：calc(25% - 4px);
**box-sizing **
1跋破、content-box 默認的盒子尺寸計算方式
2簸淀、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸毒返，邊框和內填充算在盒子尺寸內
響應式布局
響應式布局就是使用媒體查詢的方式租幕，通過查詢?yōu)g覽器寬度，不同的寬度應用不同的樣式塊拧簸，每個樣式塊對應的是該寬度下的布局方式劲绪，從而實現響應式布局。響應式布局的頁面可以適配多種終端屏幕（pc盆赤、平板贾富、手機）。
相應布局的偽代碼如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em單位弟劲，em單位是參照元素自身的文字大小來設置尺寸祷安，rem指的是參照根節(jié)點的文字大小，根節(jié)點指的是html標簽兔乞，設置html標簽的文字大小汇鞭，其他的元素相關尺寸設置用rem，這樣庸追，所有元素都有了統(tǒng)一的參照標準霍骄，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小淡溯。
cssrem安裝
cssrem插件可以動態(tài)地將px尺寸換算成rem尺寸
下載本項目读整，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 復制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text咱娶。
配置參數 參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉rem的單位比例米间，默認為40强品。 max_rem_fraction_length - px轉rem的小數部分的最大長度。默認為6屈糊。 available_file_types - 啟用此插件的文件類型的榛。默認為：[".css", ".less", ".sass"]。
彈性盒模型布局
1逻锐、容器屬性
display : flex
聲明使用彈性盒布局
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
覆寫父元素指定的對齊方式
order : integer
改變條目在容器中的出現順序
