移動式佈局

　　移動式佈局

　　　　1.移動設備：手機和iPad

　　　　系統分：安卓系統和iOS系統

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

　　　　2.佈局（寫頁面）所考慮的東西

　　　　　　設備寬度：就是設備實際大小，設備分辨率，就是手機屏幕；

　　　　　　頁面大小：別人設計好的，咱們把上面的內容實現；

　　　　　　瀏覽器視口（大小）：瀏覽器自帶的，（跟窗口沒有任何關係）；

　　　　瀏覽器的視口可經過 document.documentElement.clientWidth查看，在移動端上設備不作視口處理，通常默認的都是980

　　　　

　　　　情景：設備寬是320，頁面寬是1200px，瀏覽器視口爲980，三者不統一！，怎麼能讓他們統一？（處理適配）

　　　　咱們用移動設備看頁面，瀏覽器的視口會自動縮放，以100%的完整的展現頁面，可是頁面不清楚，特別擠；

　　　　因此：咱們須要把這移動設備，瀏覽器的視口，頁面，變得統一（咱們要作的）

　　　　1.移動設備寬和瀏覽器視口的寬一致；

　　　　　　在head之間加一個meta標籤

　　　　　<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

　　　　body的子級 width=100% 時，至關於瀏覽器視口的寬

　　　　2.當移動設備和瀏覽器視口一致時，若是使用之前佈局，若是頁面超過設備寬，超過的部分就會被裁掉，因此，不能使用傳統的頁面開發模式，

　　能夠使用彈性佈局，流式佈局（百分百佈局），響應式佈局，rem佈局

　　　　頁面和設備一致時，須要開發人員來搞

　　　　1.彈性佈局：

　　　　　　1.分兩部分：彈性父級，彈性子元素；

　　　　　　2.給父級設置display:flex/inline-flex     兼容性  display:-webkit-flex;

　　　　　　彈性父級能夠設置的屬性：flex-direction：指定彈性盒子中子元素的排列方式；

　　　　　　屬性值：row(默認：右對齊)    row-reverse(左對齊)    column（從上到下） column-reverse（從下到上）

　　　　　　屬性：justify-countent 文本的對齊方式的屬性

　　　　　　屬性值：flex-start（左對齊）　　flex-end（右對齊）　　center（居中）   space-between平均分佈該行，沒有間隔；   space-around 平均分佈改行，兩邊有間隙；

　　　　　　屬性：align-items　專門調子元素行高位置；  經常使用的屬性值：center 居中

　　　　　　屬性：flex-wrap   子元素的換行方式，  經常使用屬性值：wrap　　便會與 float:left 擁有相同的效果，在彈性佈局中也能夠使用相似浮動的效果了

　　　　　　屬性：align-content   設置多行對齊：  屬性值：center 各行彈性容器向中間的位置堆疊

　　　　　　子元素上的  屬性：order   排列       屬性值：數字，      數字越小，排的越靠前；     

　　　　　　子元素上的  屬性：flex    佔的份數    屬性值：數字，     表明他佔彈性父級的份數