移動端 移動佈局

移動佈局

1.移動設備有 手機和ipad

安卓系統 ios系統

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

2.佈局(寫頁面)

要考慮如下幾點

設置的寬度 設備的實際大小（設備的分辨率）廠家給的

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

瀏覽器的視口（大小）瀏覽器自帶的能夠經過用 document.documentElement.clientWidth 查看，在移動設備上若是不作視口處理默認是 980

例子：設備寬是320 頁面寬是1200 瀏覽器視口是980px，三者不統一，咱們用移動設備看頁面，瀏覽器視口會自動縮放，以100%完整的展現頁面，就會變得不清楚，特別擠。

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

1.移動設備寬(320) 要和瀏覽器視口寬一致

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

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

 

 

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

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

能夠使用

1.彈性佈局

1.分兩部分 分別是：彈性父級 彈性子元素

2.給父級設置 display：flex；或inline-flex

flex-direction 指定彈性盒子中子元素的排列方式