移動端頁面開發流程

移動佈局：

　　1，移動設備 手機和ipad

　　　　安卓系統iOS系統

　　　　安卓系統 內置瀏覽器是谷歌，iOS內置safari瀏覽器，他們的內核都是webkit，不考慮兼容性，須要考慮的是安卓和iOS的區別

　　2，佈局

　　　　設備寬度···設備的實際大小，設備的分辨率···廠家給的

　　　　頁面的大小···設計稿上的大小

　　　　瀏覽器的視口···瀏覽器自帶的 經過document.documentElement.clientwidth 查看在移動設備上若是不作處理通常默認980

　　　　例子----

　　　　　　設備寬320 ，頁面的寬1200 ，瀏覽器的視口980px   三種不統一，咱們用移動端看頁面，瀏覽器的視口會自動縮小，以100%完整展現頁面，就會變得模糊不清，特別擠

　　　　　　咱們須要把這三個變得統一：

　　　　　　1，移動設備寬（320）和瀏覽器視口寬（980）變得一致

　　　　　　　　在head之間加一個meta標籤name=‘viewport’

　　　　　　　　設備寬度和瀏覽器視口一致時，若是頁面寬大於這個數字，就會出現滾動條

　　　　　　　　var meta=document.createElement('meta')

　　　　　　　　meta.name='viewport';

　　　　　　　　meta.content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no';

　　　　　　　　document.head.appendChild(meta)

　　　　　　2，當移動設備和瀏覽器視口一致時，若是你還用傳統開發，若是頁面超過設備寬，超過的部分會被截掉

　　　　　　　　不能用傳統的頁面開發模式

　　　　　　　　a）彈性佈局

　　　　　　　　b）流式佈局（百分百佈局）···相對父級

　　　　　　　　c）響應式佈局

　　　　　　　　d）rem佈局

　　　彈性佈局----

　　　　　　1，分兩部分---彈性父級，彈性子元素

　　　　　　2，給父級設置display：flex或inline-flex   *彈性子元素一般在彈性盒子內一行顯示

　　　　　　　　flex-direction 屬性　　指定了彈性子元素在父容器中的位置

　　　　　　　　　　　　row：

　　　　　　　　　　　　　　橫向從左到右排列（左對齊），默認的排列方式

　　　　　　　　　　　　row-reverse：

　　　　　　　　　　　　　　反轉橫向排列（右對齊，從後往前排，最後一項排在最前面）

　　　　　　　　　　　　column：

　　　　　　　　　　　　　　縱向排列

　　　　　　　　　　　　column-reverse：

　　　　　　　　　　　　　　反轉縱向排列，從後往前排，最後一項排在最上面

　　　　　　　　justify-content  屬性　　內容對齊

　　　　　　　　　　　　flex-start：

　　　　　　　　　　　　　　彈性項目向行頭緊挨着填充

　　　　　　　　　　　　flex-end：

　　　　　　　　　　　　　　彈性項目向行尾緊挨着填充

　　　　　　　　　　　　center：

　　　　　　　　　　　　　　彈性項目居中緊挨着填充

　　　　　　　　　　　　space-between：

　　　　　　　　　　　　　　彈性項目平均分佈在該行上

　　　　　　　　　　　　space-around：

　　　　　　　　　　　　　　彈性項目平均分佈在該行上，兩邊留有一半的空間間隔

　　　　　　　　align-items 屬性　　設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式

　　　　　　　　　　　　flex-start：

　　　　　　　　　　　　　　彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。

　　　　　　　　　　　　flex-end：

　　　　　　　　　　　　　　彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。

　　　　　　　　　　　　center：

　　　　　　　　　　　　　　彈性盒子元素在該行的側軸（縱軸）上居中放置。若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）

　　　　　　　　　　　　baseline：

　　　　　　　　　　　　　　如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。　　

　　　　　　　　　　　　stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸

　　　　　　　　flex-wrap 屬性　　用於指定彈性盒子的子元素換行方式。

　　　　　　　　　　　　nowrap - 默認，

　　　　　　　　　　　　　　　彈性容器爲單行。該狀況下彈性子項可能會溢出容器。

　　　　　　　　　　　　wrap - 彈性容器爲多行。

　　　　　　　　　　　　　　　　該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行

　　　　　　　　　　　　wrap-reverse -反轉 wrap 排列。