移動端app分類
1倚聚、Native App 原生app手機應(yīng)用程序
使用原生的語言開發(fā)的手機應(yīng)用二驰，Android系統(tǒng)用的是java，iOS系統(tǒng)用的是object-C
2秉沼、Hybrid App 混合型app手機應(yīng)用程序 混合使用原生的程序和html5頁面開發(fā)的手機應(yīng)用
3、Web App 基于Web的app手機應(yīng)用程序 完全使用html5頁面加前端js框架開發(fā)的手機應(yīng)用
Viewport 視口
視口是移動設(shè)備上用來顯示網(wǎng)頁的區(qū)域矿酵，一般會比移動設(shè)備可視區(qū)域大唬复，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設(shè)計的網(wǎng)頁全肮，這樣帶來的后果是移動端會出現(xiàn)橫向滾動條敞咧，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小辜腺。這樣會讓網(wǎng)頁不容易觀看休建，可以用 meta 標簽乍恐，name=“viewport ” 來設(shè)置視口的大小，將視口的大小設(shè)置為和移動設(shè)備可視區(qū)一樣的大小测砂。
設(shè)置方法如下：
<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>
視網(wǎng)膜屏幕（retina屏幕）清晰度解決方案
視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕茵烈，物理像素可以理解為屏幕上的一個發(fā)光點，無數(shù)發(fā)光的點組成的屏幕砌些，視網(wǎng)膜屏幕比一般屏幕的物理像素點更小呜投，常見有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕，2倍的視網(wǎng)膜屏幕存璃，它的物理像素點大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕仑荐，它的物理像素點大小是一般屏幕的1/9。
圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣纵东，但是由于視網(wǎng)膜屏幕的物理像素點比一般的屏幕小粘招，圖像在上面好像是被放大了，圖像會變得模糊偎球，為了解決這個問題洒扎，可以使用比原來大一倍的圖像，然后用css樣式強制把圖像的尺寸設(shè)為原來圖像尺寸的大小甜橱，就可以解決模糊的問題逊笆。
PC及移動端頁面適配方法
設(shè)備屏幕有多種不同的分辨率，頁面適配方案有如下幾種：
1岂傲、全適配：流體布局+響應(yīng)式布局
2难裆、移動端適配：
- 流體布局+少量響應(yīng)式
- 基于rem的布局
- 彈性盒模型
流體布局
流體布局，就是使用百分比來設(shè)置元素的寬度镊掖，元素的高度按實際高度寫固定值乃戈，流體布局中，元素的邊線無法用百分比亩进，可以使用樣式中的計算函數(shù) calc() 來設(shè)置寬度症虑，或者使用 box-sizing 屬性將盒子設(shè)置為從邊線計算盒子尺寸。
**calc() **
可以通過計算的方式給元素加尺寸归薛，比如： width：calc(25% - 4px);
**box-sizing **
1谍憔、content-box 默認的盒子尺寸計算方式
2、border-box 置盒子的尺寸計算方式為從邊框開始主籍，盒子的尺寸习贫，邊框和內(nèi)填充算在盒子尺寸內(nèi)
響應(yīng)式布局
響應(yīng)式布局就是使用媒體查詢的方式，通過查詢?yōu)g覽器寬度千元，不同的寬度應(yīng)用不同的樣式塊苫昌，每個樣式塊對應(yīng)的是該寬度下的布局方式，從而實現(xiàn)響應(yīng)式布局幸海。響應(yīng)式布局的頁面可以適配多種終端屏幕（pc祟身、平板奥务、手機）。
相應(yīng)布局的偽代碼如下：
@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單位是參照元素自身的文字大小來設(shè)置尺寸氯葬，rem指的是參照根節(jié)點的文字大小，根節(jié)點指的是html標簽父款，設(shè)置html標簽的文字大小溢谤，其他的元素相關(guān)尺寸設(shè)置用rem，這樣憨攒，所有元素都有了統(tǒng)一的參照標準世杀，改變html文字的大小，就會改變所有元素用rem設(shè)置的尺寸大小肝集。
cssrem安裝
cssrem插件可以動態(tài)地將px尺寸換算成rem尺寸
下載本項目瞻坝，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text -> Preferences -> Browse Packages... 復(fù)制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text杏瞻。
配置參數(shù) 參數(shù)配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉(zhuǎn)rem的單位比例所刀，默認為40。 max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長度捞挥。默認為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
同時設(shè)置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸確定之后，用此屬性來設(shè)置flex-direction定義方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸確定之后讹俊，用此屬性來設(shè)置flex-direction定義方向上的垂直方向的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
設(shè)置多行子元素在行方向上的對齊方式
2垦沉、條目屬性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同時設(shè)置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
改變條目在容器中的出現(xiàn)順序
