移動端頁面配置

標籤：content   填充   頁面   相關   技術分享   android   ase   ace   reverse   

移動端頁面配置一、移動端app分類1、Native App原生app手機應用程式

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

2、Hybrid App 混合型app手機應用程式

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

3、Web App 基於Web的app手機應用程式

　　完全使用html5頁面加前端js架構開發的手機應用

二、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">三、PC及移動端頁面適配方法

裝置有多種不同的解析度，頁面適配方案有如下幾種：

1、全適配：流體布局+響應式布局2、移動端適配：

　　a、流體布局+少量響應式

　　b、基於rem的布局

　　c、彈性合模型

a、流體布局

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

1、calc()  可以通過計算的方式給元素加尺寸。比如：width:calc(25% - 4px);2、box-sizing

　　a、content-box 預設的盒子尺寸計算方式。

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

響應式布局

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

相應布局的虛擬碼如下：

b、基於rem的布局1、em單位是參照元素自身的文字大小來設定尺寸

2、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、彈性盒模型布局1、容器屬性 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  第一行子項目靠上頂格，最後一行子項目靠下頂格，中間行子項目等分垂直的間距

2、條目屬性

　　同時設定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

移動端頁面配置