移動Web開發(fā)涉及到一些基本的概念和技術。在本文中，我們將介紹一些關鍵的知識點。 1. 像素基礎 在移動Web開發(fā)中，像素是一個重要的概念。以下是一些與像素相關的基本知識： px: CS

移動Web開發(fā)涉及到一些基本的概念和技術。在本文中，我們將介紹一些關鍵的知識點。

1. 像素基礎

在移動Web開發(fā)中，像素是一個重要的概念。以下是一些與像素相關的基本知識：

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

2. Viewport

Viewport是指移動設備上用于顯示網頁內容的區(qū)域。以下是一些關于Viewport的基本知識：

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

3. Viewport meta標簽

使用meta標簽可以更改Viewport的默認值。以下是一些常用的Viewport設置：

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

4. Viewport 編碼

以下是一些關于Viewport編碼的方案：

方案一：設備實際寬度設計（常用）

手機寬度320px。（按照這個尺寸重新設計）

方案二：flexbox彈性盒子布局

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

方案三：flex彈性盒子模型

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

5. 彈性圖片

移動Web中，彈性圖片是一個重要的概念。以下是一些關于彈性圖片的知識點：

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

6. 移動Web樣式特別處理

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

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

7. 300毫秒故事

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