移動布局：
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';
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 排列。
19 01 05 移動端頁面開發
視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為pc端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易 可以用 meta 標籤，name view...
移動端開發流程分享
1.由於產品及ui能力限制,不能達到理想狀態,從以往專案開發中總結發現,在開發及測試週期中發現需求缺陷問題,需要花費大量的溝通成本,導致專案週期有所影響並嚴重影響開發效率和開發質量,解決方案 再產品需求 原型設計及ui階段,開發需要嚴格把控質量,幫助產品提公升交付件的質量 2.由於介面開發人員未討論...
移動端開發頁面布局 3
1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應，稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...