移動端頁面布局

阿新 • • 發佈：2017-07-14

-c 頁面布局 rec ios系統 js框架動態 direct packages scale

移動端頁面布局

一、移動端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"]。

技術分享