移動端開發技巧，響應式佈局的實現，彈性盒模型

 1、移動端開發技巧

瞭解 像素基礎知識

① 設備物理像素：設備上一個像素點
② 設備無關像素：能夠與物理像素經過dpr轉換。（當dpr爲1時，設備無關像素=設備物理像素）
③ CSS像素：CSS中使用的抽象概念。當頁面沒有縮放時，CSS像素=設備無關像素。

設備像素比dpr = 物理像素/設備無關像素

 

重點 viewport 視口 默認980

 

設置佈局viewport的各類信息：
width=device-width：佈局viewport寬度等於設備寬度
initial-scale=1.0：默認縮放比爲1(目的：讓CSS像素=設備無關像素)
maximum-scale=1：最大縮放比爲1
minimum-scale=1：最小縮放比爲1
user-scalable=no：用戶禁止縮放(iOS10中的sarifi瀏覽器失效)

 

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

<!--
禁止設備將疑似手機號/郵箱,進行識別。取消點擊撥打電話等事件
-->
<meta name="format-detection"content="telephone=no,email=no"/>

<!--
iOS 添加到主屏幕時，WebAPP的標題
-->
<meta name="apple-mobile-web-app-title" content="個人第一個WebAPP">

<!--
iOS 添加到主屏幕時，WebAPP的icon圖標
-->
<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />

<!--
iOS 添加到主屏幕時，啓用WebAPP全屏模式，刪除頂端地址欄和底部工具欄
-->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!--
iOS 添加到主屏幕時，WebAPP頂部狀態的樣式
可選值：
black：黑色
default：默認白色
black-translucent(半透明)：網頁內容充滿整個屏幕，頂部狀態欄會遮擋網頁頭部。
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!--
設置瀏覽器，時候最新的IE和chrome去編譯
>>> 不是手機端專用，PC網頁通常也須要設置
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 其餘幾個meta標籤，瞭解便可
① 設置瀏覽器過時時間，-1表示時刻過時，及每次刷新都要請求最新數據
② 是否設置瀏覽器緩存，否
③ 是否從本機讀取緩存文件，否
-->
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">

 2、響應式佈局的實現

使用@media的三種方式
一、直接在css文件裏面使用：
@media 類型 and (條件1) ang (條件2){css樣式}

二、使用imput導入：
@input url（"css/02-css M.css"）all and (max-width:980px)

三、使用link連接，media屬性用於設置查詢方式：
<link rel="stylesheet" href="css/02-css-M.css" media="all and (max-width:980px)"/>

3、彈性盒模型

一、給父容器添加display：flex（inline-flex）；屬性
二、父容器可使用的屬性值有；
① flex-direction 屬性決定主軸的方向（項目的排列方向）
row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿

② flex-wrap：若是一條軸線排不下，如何換行
nowrap（默認）：不換行。當父容器寬度不夠用，每一個item會被適當擠壓
wrap：換行，第一行在父容器上方。
wrap-reverse：換行，第一行父容器在下方

③ flex-flow：flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap

④ justify-content：屬性定義了項目在主軸上的對齊方式
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。（首位項目分別在父容器最左和最右）
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。
（首尾會與父容器兩邊各有間隔）

⑤ align-items：屬性定義項目在交叉軸上如何對齊
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。（基線：字母本中的第三條線）（行高、字體會影響每行的基線）
stretch（默認值）：拉伸 若是項目（子容器）未設置高度或設爲auto，將佔滿整個父容器的高度。

⑥ align-content：屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

三、子容器上可使用的屬性：
① order：屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0
② flex-grow：定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
③ flex-shrink：定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
④ flex-basis：定義了在分配多餘空間以前，項目佔據的主軸空間（main size）
瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，
即項目的原本大小。
⑤ flex：是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
⑥ align-self：定義單個item在交叉軸上的對齊方式，能夠覆蓋父容器的align-items.
默認值爲auto，表示繼承父元素的align-items屬性，
若是沒有父元素，則等同於stretch。