移動端頁面佈局

移動端頁面佈局

1、移動端app分類

一、Native App原生app手機應用程序

　　使用原生的語言開發的手機應用，Android系統用的是java，ios系統用的是object-C

二、Hybrid App 混合型app手機應用程序

　　混合使用原生的程序和html5頁面開發的手機應用

三、Web App 基於Web的app手機應用程序

　　徹底使用html5頁面加前端js框架開發的手機應用

2、Viewport視口

　　視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用meta標籤，name="viewport"來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。

設置方法以下：

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

3、PC及移動端頁面適配方法

設備有多種不一樣的分辨率，頁面適配方案有以下幾種：

一、全適配：流體佈局+響應式佈局

二、移動端適配：

　　a、流體佈局+少許響應式

　　b、基於rem的佈局

　　c、彈性合模型

a、流體佈局

　　就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線（border）沒法用百分比，能夠使用樣式中的計算函數calc()來設置寬度，或者使用box-sizing屬性將盒子設置爲邊線計算盒子尺寸。

一、calc()  能夠經過計算的方式給元素加尺寸。好比：width:calc(25% - 4px);

二、box-sizing

　　a、content-box 默認的盒子尺寸計算方式。

　　b、border-box 置盒子的尺寸計算方式爲從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內

響應式佈局

　　響應式佈局就是使用媒體查詢的方式，經過查詢瀏覽器的寬度，不一樣的寬度應用不一樣的樣式塊，每一個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局，響應式佈局的頁面能夠適配多種終端屏幕（pc、平板、手機）。

相應佈局的僞代碼以下：

b、基於rem的佈局

一、em單位是參照元素自身的文字大小來設置尺寸

二、rem指的是參照根節點的文字大小。

　　根節點指的是html標籤，設置html標籤的大小，其餘的元素相關尺寸設置用rem，這樣，全部元素都有了統一的參照標準，改變html文字的大小，就會改變全部元素用rem設置的尺寸大小。

 

 cssrem安裝：cssrem插件能夠動態地將px尺寸換算成rem尺寸

　　下載本項目，好比：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime  Text-》Preferences-》Browse  Packages  複製下載的cssrem目錄到剛纔的packages目錄裏。重啓Sublime  Text。

　　配置參數  參數配置文件：Sublime  Text-》Preferences-》Package  Settings-》cssrem 裏面有個px_to_rem （意思是px轉rem的單位比例，默認爲40）。max_rem_fraction_length（px轉rem的小數部分最大的長度。默認爲6）。availiable_file_types 啓用此插件的文件類型。默認爲：[".css"，".less"，"sass"，".html"]。

c、彈性盒模型佈局

一、容器屬性 display:flex  聲明使用彈性盒佈局(所有都是在父元素上設置)

使用display:flex相對於把子元素變爲行內塊元素，而且之間不會產生間隙。

　　肯定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve

　　a、 flex-direction:row 默認子元素水平靠左排列

　b、 flex-direction:row-reverse  子元素靠右倒序排列，相似於右浮動

　c、 flex-direction:column; 豎排

 

　d、 flex-direction:column-reverse; 倒序豎排

 

　　元素超過父容器尺寸時是否換行: flex-wrap:nowrap|wrap|wrap-reverse

　　a、flex-wrap:nowrap； 子元素寬度超過父級寬度時，默認不換行  

b、flex-wrap:wrap； 子元素寬度超過父級寬度時，換行 

 

c、flex-wrap:wrap-reserve； 子元素寬度超過父級寬度時，倒序換行 

 

 同時設置flex-direction | flex-wrap如： flex-flow:flex-direction | flex-wrap  flex-flow:row  wrap;

　　子元素的尺寸肯定以後，用此屬性來設置flex-direction定義方向上的分佈方式：justify-content:flex-start | flex-end | center | space-between | space-around

　　a、justify-content:flex-start  總體子元素靠左

　　b、justify-content:flex-end  總體子元素靠右

 

c、justify-content:center  總體子元素居中

 

d、justify-content:space-between  第一個子元素靠左頂格，最後一個子元素靠右頂格，中間子元素均分距離

 

e、justify-content:space-around  第一個子元素靠左的間距和最後一個子元素靠右的間距是中間子元素間距的一半，中間的元素等分間距。

 

　　子元素的尺寸肯定以後，用此屬性來設置flex-direction定義方向上的垂直方向的分佈方式：align-items:flex-start | flex-end | center | baseline | stretch

　　a、align-items:flex-start  總體垂直靠上排列

b、align-items:flex-end  總體垂直靠下排列

 

c、align-items:center  總體子元素垂直居中（也能夠使用margin或padding或定位來實現）

 

d、align-items:baseline  子元素內的文字底部對齊，若是文字大小不一樣，會致使子元素底部不對齊

 

e、align-items:stretch  若是子元素不設置高度，高度會被拉伸到和父元素高度相同（除去自身的margin）

　　設置多行子元素在行方向上的對齊方式：align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch

a、align-content : flex-start  多行總體靠上排列

b、align-content : flex-end 多行總體靠下排列

c、align-content :center 多行總體居中排列

d、align-content:space-between  第一行子元素靠上頂格，最後一行子元素靠下頂格，中間行子元素等分垂直的間距

二、條目屬性

　　同時設置flex-grow和flex-shrink以及flex-basis 如：flex:none | <'flex-grow' ><'flex-shrink'>'?||<'flex-basis'>

　　表示當父元素又多餘的空間時，這些空間在不一樣子元素質檢的分配比例。flex-grow:number

　　當父元素的空間不足時，各個子元素的尺寸縮小的比例。flex-shrink:number

　　用來肯定彈性條目的初始主軸尺寸。flex-basis:length|precentage|auto|content

　　覆寫父元素指定的對齊方式。align-self:auto | flex-start | flex-end |center|baseline|stretch

　　改變條目在容器中的出現順序。order:integer