移動端頁面開發流程

時間 2019-11-12

標籤移動頁面開發流程欄目無線简体版

原文原文鏈接

移動端頁面佈局

1、移動端app分類

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

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

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

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

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

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

2、Viewport視口

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

　　在移動端用來承載網頁的這個區域，就是咱們的視覺窗口，viewport（視口），這個區域能夠設置高度寬度，能夠按比例放大縮小，並且能設置是否容許用戶自行縮放。html5

參數說明：

width：寬度設置的是viewport寬度，能夠設置device-width特殊值
initial-scale：初始縮放比，大於0的數字
maximum-scale：最大縮放比
minimum-scale：最小縮放比
user-scalable：用戶是否能夠縮放，yes或no（1或0）

<!--viewport只有移動端才能識別-->
<!--設置寬度  設置成和設備同樣的寬度(width=device-width)-->
<!--設置默認的縮放比  initial-scale =1.0-->
<!--設置是否容許用戶自行縮放  user-scalable   no yes-->

設置方法以下：

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

PC頁面在手機縮放的緣由：

一、iphone默認的viewport980px ，user-scalable=yes
二、那麼initial-scale在320px的瀏覽器上就是320/980 爲0.33333

總結：

用meta標籤把viewport的寬度設爲device-width，同時initial-scale=1.user-scale=0就構建了一個標準的移動web頁面java

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

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

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

二、移動端適配：

　　使用百分比自適應佈局（流式佈局）同時須要對移動端的viewport視口進行設置，就能夠達到適配的目的git

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

　　b、基於rem的佈局web

　　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）

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

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

使用彈性盒模型作菜單

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>彈性盒模型的應用</title>
 6     <link rel="stylesheet" href="../css/reset.css">
 7     <style>
 8         .menu_con{
 9             width:960px;
10             margin:20px auto;
11             display: flex;
12         }
13         .logo{
14             width:80px;
15             height:60px;
16             background:gold;
17         }
18         .menu{
19             background: #c3eaff;
20             flex-grow: 1;
21             display: flex;
22             align-content: space-between;
23             /*使子元素垂直居中*/
24             align-items: center;
25             overflow: hidden;
26         }
27         .menu li{
28             text-align: center;
29             /*每一個li均分剩餘寬度*/
30             flex-grow: 1;
31             border-left:1px solid #ccc;
32             margin-left:-1px;
33         }
34         /*
35             或者是給父元素加overflow:hidden,同時給子元素設置margin-left爲負值來實現邊框合併
36             可使用這種方法來去掉第一個li的左邊距
37             .menu li:nth-child(1){
38              border-left: 0;
39             }
40         */
41         menu li a{
42             color:#666;
43         }
44         @media (max-width:960px){
45             .menu_con{
46                 width:100%;
47             }
48         }
49     </style>
50 </head>
51 <body>
52     <div class="menu_con">
53         <div class="logo"></div>
54         <ul class="menu">
55             <li><a href="javascript:void(0);">首頁</a></li>
56             <li><a href="javascript:void(0);">新聞動態</a></li>
57             <li><a href="javascript:void(0);">時事熱點</a></li>
58             <li><a href="javascript:void(0);">娛樂新聞</a></li>
59             <li><a href="javascript:void(0);">關於咱們</a></li>
60         </ul>
61     </div>
62 </body>
63 </html>