移動端web app開發學習筆記

時間 2020-07-22

標籤移動 web app 開發學習筆記欄目無線简体版

原文原文鏈接

移動web和pc端web以及web appphp

移動web開發跟web前端開發差異很小，使用的技術都是html+css+js。手機網頁能夠理解成pc網頁的縮小版加一些觸摸特性。在瀏覽器中進行的網頁開發，最終代碼具備跨系統平臺的特性。css

web app開發特指的是用html5技術開發，之因此叫web app是由於它與客戶端應用程序很類似，能夠和系統深度融合，調用一些只有客戶端才能調用的功能（利用html5開發出的網頁能夠訪問電話、相機等功能）.html

進行移動端web開發要在頭部添加這樣一段代碼前端

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

viewport 表示網頁視口html5

width=device-width 　　網頁寬度等於設備寬度web

initial-scale =1 網頁初始的縮放比例爲1（不縮放））移動web開發

user-scalable 　　用戶是否能夠手動縮放瀏覽器

Flexbox（彈性佈局）
app

原文連接：http://caibaojian.com/flexbox-guide.html
移動端web

彈性佈局（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個更加有效的方式來佈置，對齊和分佈在容器之間的各項內容，即便它們的大小是未知或者動態變化的。·

彈性佈局的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間（主要是爲了容納全部類型的顯示設備和屏幕尺寸）的能力。

最重要的是彈性盒子佈局與方向無關，相對於常規的佈局（塊是垂直和內聯水平爲基礎），很顯然，這些工做以及網頁設計缺少靈活性，沒法支持大型和複雜的應用程序（特別當它涉及到改變方向，縮放、拉伸和收縮等）。

注意： Flexbox佈局是最合適的一個應用程序的組件，以及小規模的佈局，而網格佈局是用於較大規模的佈局。

來源：前端開發博客

最經常使用的Flexbox設置

<style>
    .box{
            /*設置彈性佈局*/
            display:flex;
            /*主軸方向的對齊方式*/
            justify-content: space-around;
            /*交叉軸方向的對齊方式*/
            align-items:center;
            heigth:300px;
            border:1px solid purple;
            }
    .box div{
            width:20px;
            heigth:20px;
            background-color:pink;
            }
</style>

下面介紹一下Flexbox經常使用的六個屬性

flex-direction屬性經過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。

row：默認值。靈活的項目將水平顯示，正如一個行同樣。

row-reverse：與 row 相同，可是以相反的順序。

column：靈活的項目將垂直顯示，正如一個列同樣。

column-reverse：與 column 相同，可是以相反的順序。

flex-wrap屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

nowrap:默認值。規定靈活的項目不拆行或不拆列。

wrap:規定靈活的項目在必要的時候拆行或拆列.

wrap-reverse:規定靈活的項目在必要的時候拆行或拆列，可是以相反的順序。

flex-flow複合屬性。設置或檢索彈性盒模型對象的子元素排列方式

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性。

flex-flow 屬性用於設置或檢索彈性盒模型對象的子元素排列方式。

flex-direction 屬性規定靈活項目的方向。

flex-wrap 屬性規定靈活項目是否拆行或拆列。

注意：若是元素不是彈性盒對象的元素，則 flex-flow 屬性不起做用。

justify-content屬性定義了項目在主軸上的對齊方式

它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸爲從左到右。

flex-start（默認值）：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性定義項目在交叉軸上如何對齊

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度

align-content在彈性容器內的各項沒有佔用交叉軸上全部可用的空間時對齊容器內的各項（垂直）。

stretch	默認值。元素被拉伸以適應容器。各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸。
center	元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（若是剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）
flex-start	元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，以後的每一行都緊靠住前面一行。
flex-end	元素位於容器的結尾各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，以後的每一行都緊靠住前面一行。
space-between	元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分佈。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它狀況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around	元素位於各行以前、之間、以後都留有空白的容器內。各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它狀況下，各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。

下面來個實例

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <!--設置視口-->
 6     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 7     <title>九宮格效果實現</title>
 8     <style>
 9         body{
10             margin: 0;/*設置邊距，能夠有1~4個值*/
11         }
12         /*box 設置爲彈性盒模型*/
13         .box{
14             display: flex;
15             flex-wrap: wrap;/*設置換行*/
16         }
17         /*每一個item 也設置爲彈性盒模型*/
18         .box .item{
19             font-size: 14px;/*font-size屬性設置字體大小*/
20             padding: 20px 0;/*padding屬性設置內邊距,此處爲簡寫，上下填充20px，左右0*/
21             display: flex;
22             flex-direction: column;/*flex-direction屬性規定靈活項目的方向,此處爲垂直顯示*/
23             align-items: center;/*align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。*/
24             width: 33.3333%;
25             box-sizing: border-box;/*設置盒子大小(邊框之內爲盒子的內容區大小)*/
26             border-right: 1px solid #eeeeee;/*設置邊框線*/
27             border-bottom: 1px solid #eeeeee;
28         }
29         /*用nth-child(N)選擇器去除3,6,9位置盒子的右邊框*/
30         .box .item:nth-child(3n) {
31             border-right: none;
32         }
33         .box .item img{
34             margin-bottom: 10px;
35             width: 30px;
36         }
37     </style>
38 </head>
39 <body>
40 
41     <div class="box">
42         <div class="item">
43             <img src="icons/grid-01.png" alt=""/>
44             <span>美食</span>
45         </div>
46         <div class="item">
47             <img src="icons/grid-02.png" alt=""/>
48             <span>洗浴</span>
49         </div>
50         <div class="item">
51             <img src="icons/grid-03.png" alt=""/>
52             <span>結婚啦</span>
53         </div>
54         <div class="item">
55             <img src="icons/grid-04.png" alt=""/>
56             <span>卡拉OK</span>
57         </div>
58         <div class="item">
59             <img src="icons/grid-05.png" alt=""/>
60             <span>找工做</span>
61         </div>
62         <div class="item">
63             <img src="icons/grid-06.png" alt=""/>
64             <span>輔導班</span>
65         </div>
66         <div class="item">
67             <img src="icons/grid-07.png" alt=""/>
68             <span>汽車保養</span>
69         </div>
70         <div class="item">
71             <img src="icons/grid-08.png" alt=""/>
72             <span>租房</span>
73         </div>
74         <div class="item">
75             <img src="icons/grid-09.png" alt=""/>
76             <span>裝修</span>
77         </div>
78     </div>
79 
80 </body>
81 </html>