【前端】移動端Web開發學習筆記【2】 & flex佈局

• 上一篇：移動端Web開發學習筆記【1】

---

meta標籤

• width設置的是layout viewport 的寬度
• initial-scale=1.0 自帶 width=device-width
• 最佳實踐：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

---

Flex彈性盒模型

來源：慕課網

源HTML文件(備份下載)：web_flex.html.zip

---

Flexbox兼容性問題

• iOS、Android4.4及以上，可使用最新的flex佈局
• Android4.4如下，只能使用舊版的flexbox佈局

新版flex佈局 和 舊版flexbox佈局 對比：

新flex佈局	舊flexbox佈局
display: -webkit-flex;	display: -webkit-flex-box;
-webkit-flex: 1;	-webkit-flex-box: 1;
justify-content: center;	box-pack: center;
align-items: center;	box-align: center;

---

響應式設計

媒體查詢：

媒體類型：

• screen (屏幕) (經常使用)
• print (打印機)
• handheld (手持設備)
• all (通用) (經常使用)

經常使用的媒體查詢參數：

• width, height (viewport寬高)
• divice-width, device-height (設備的寬高)
• orientation: 檢查設備處於landscape仍是portrait

媒體查詢示例：

@media screen and (max-width:1024px) {
    /* ... */
}

設計點1：百分比佈局

使用媒體查詢來適應不一樣的固定寬度，只會從一組css切換到另外一組css, 沒有平滑漸變。當沒有命中媒體查詢時，變現就變得不可控（滾動，換行）。
因此須要百分比佈局。

設計點2：彈性圖片

相似第一點，圖片也使用百分比。

img {
    max-width: 100%;
    height: auto;
}

設計點3：從新佈局，顯示與隱藏

當頁面寬度太小時，就須要作出一些處理：

1. 同比例縮減元素尺寸
2. 調整頁面元素佈局
3. 隱藏冗餘的元素
4. 常常須要切換位置的元素使用絕對定位，能夠提升性能。

總結：

缺點：

• 根據響應式設計的理念，一個頁面包含不一樣設備的樣式和圖片。這樣就形成了冗餘。性能也不是最優。

優勢：

• 減小重複開發。

---

移動Web的特別樣式處理

高清圖片

在retina屏幕上渲染圖片，爲了不圖片產生模糊，圖片的寬高應該用物理像素單位渲染。
即100*100的圖片，應該使用100dp*100dp.

例子：

• width: (w_value/dpr)px;
• height: (h_value/dpr)px;

1像素邊框

在retina屏幕上渲染圖片，1px使用2dp或者3dp渲染。

解決方法：

• 方法一：border: 0.5px; /* 只有iOS8能夠用 */
• 方法二：scaleY(0.5):

相對單位rem

• em: 相對於父節點的font-size (em在多層嵌套下，很是難以維護)
• rem: 相對於html的font-size

rem的基值怎樣設置：

rem = screen.width / 10
或者 rem = screen.width / 20

不使用rem的狀況：font-size

通常來說，font-size是不該該使用rem等相對單位的。應爲字體應該首先保證閱讀的實用性，其次纔是排版佈局。

多行文本溢出