移動(dòng)Web開發(fā)涉及到一些基本的概念和技術(shù)。在本文中，我們將介紹一些關(guān)鍵的知識(shí)點(diǎn)。 1. 像素基礎(chǔ) 在移動(dòng)Web開發(fā)中，像素是一個(gè)重要的概念。以下是一些與像素相關(guān)的基本知識(shí)： px: CS

移動(dòng)Web開發(fā)涉及到一些基本的概念和技術(shù)。在本文中，我們將介紹一些關(guān)鍵的知識(shí)點(diǎn)。

1. 像素基礎(chǔ)

在移動(dòng)Web開發(fā)中，像素是一個(gè)重要的概念。以下是一些與像素相關(guān)的基本知識(shí)：

• px: CSS像素，瀏覽器使用的抽象單位。
• dp, pt: 設(shè)備無關(guān)像素。
• devicePixelRatio: 設(shè)備像素縮放比例。

2. Viewport

Viewport是指移動(dòng)設(shè)備上用于顯示網(wǎng)頁內(nèi)容的區(qū)域。以下是一些關(guān)于Viewport的基本知識(shí)：

1. iOS的Viewport通常是980px；而安卓設(shè)備的Viewport大小則不確定。
2. 為什么不使用默認(rèn)的980px布局Viewport？原因是寬度不可控制，不同系統(tǒng)設(shè)備的默認(rèn)值可能不同，導(dǎo)致頁面在縮小模式下顯示不友好、鏈接不可點(diǎn)以及需要滾動(dòng)。
3. 通過meta標(biāo)簽來改變默認(rèn)Viewport的值。

3. Viewport meta標(biāo)簽

使用meta標(biāo)簽可以更改Viewport的默認(rèn)值。以下是一些常用的Viewport設(shè)置：

lt;meta name"viewport" content"namevalue,namevalue"gt;
1. width: 設(shè)置布局Viewport的特定值，但為了適應(yīng)不同尺寸的手機(jī)屏幕，通常使用device-width來自適應(yīng)用戶的屏幕大小。
2. initial-scale: 設(shè)置頁面的初始縮放比例，公式為。
3. minimum-scale: 最小縮放比例。
4. maximum-scale: 最大縮放比例。
5. user-scalable: 用戶是否可以縮放。

4. Viewport 編碼

以下是一些關(guān)于Viewport編碼的方案：

方案一：設(shè)備實(shí)際寬度設(shè)計(jì)（常用）

手機(jī)寬度320px。（按照這個(gè)尺寸重新設(shè)計(jì)）

方案二：flexbox彈性盒子布局

父元素使用display: -webkit-flex，子元素使用flex: 1來占據(jù)父容器的比例。

方案三：flex彈性盒子模型

通過指定width和flex屬性來混合劃分空間。

5. 彈性圖片

移動(dòng)Web中，彈性圖片是一個(gè)重要的概念。以下是一些關(guān)于彈性圖片的知識(shí)點(diǎn)：

• 使用max-width: 100%可以讓圖片在容器中自適應(yīng)大小。

6. 移動(dòng)Web樣式特別處理

在移動(dòng)Web開發(fā)中，有一些樣式需要特別處理。以下是一些常用的處理方法：

1. 一像素邊框：在Retina屏幕下，使用1px渲染邊框會(huì)出現(xiàn)模糊的問題，可以使用0.5px渲染，并通過scaleY(0.5)進(jìn)行縮放。
2. 相對(duì)單位rem：根據(jù)父節(jié)點(diǎn)的font-size來變化，可作為全局統(tǒng)一的度量單位。
3. 多行文本溢出：使用text-overflow: ellipsis和-webkit-box-orient: vertical等屬性實(shí)現(xiàn)文本溢出省略號(hào)。

7. 300毫秒故事

移動(dòng)Web上的click事件響應(yīng)通常會(huì)有300毫秒的延遲?？梢允褂肨ap事件代替click事件，或者使用庫例如Zepto.js來解決這個(gè)問題。