最近學(xué)習(xí)了些移動(dòng)web開發(fā)的基礎(chǔ)知識(shí)，稍微做下記錄總結(jié)：

• Hello,移動(dòng)web： https://www.imooc.com/learn/494

一、基礎(chǔ)知識(shí)

1. 關(guān)于Pixel

• px : CSS px，邏輯像素，瀏覽器使用的抽象單位
• dp，pt： device independence pixel 物理像素：設(shè)備無關(guān)像素
• dpr ： devicePixelRatio 設(shè)備像素縮放比

計(jì)算公式： 1px = （dpr）² * dp 一個(gè)CSS像素對(duì)iphone5相當(dāng)于4個(gè)物理像素
在一維上，一個(gè)CSS 像素，相當(dāng)于兩個(gè)物理像素。

• DPI：打印機(jī)每英寸可以噴的墨汁點(diǎn)
• PPI：屏幕每英寸的像素?cái)?shù)量，即單位英寸內(nèi)的像素密度，PPI越高，默認(rèn)的dpr越大。

以iphone 5 為例：

2. Viewport視圖概念

作用
- 將頁面渲染在一個(gè)默認(rèn)980px（ios）的viewport中，andriod可自定義
- 縮放
viewport分layout viewport和visual viewport一般不使用默認(rèn)的980的viewport，而是使用meta標(biāo)簽改變viewport。

3. Viewport_Meta標(biāo)簽

定義布局content寬度和縮放比，期望縮放比統(tǒng)一。
直接使用980的默認(rèn)設(shè)置并不適合。
最佳實(shí)踐：布局viewport = 設(shè)備寬度 = 度量viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 方案一：根據(jù)設(shè)備的實(shí)際寬度設(shè)計(jì)——手機(jī)寬320px，就用320px設(shè)計(jì)。
• 方案二：縮放比設(shè)為0.5，使得設(shè)備的物理像素等于抽象像素來設(shè)計(jì)。1px邊框和高清圖片不需要額外設(shè)計(jì)。

二、響應(yīng)式移動(dòng)Web排版布局

布局主要分為固定布局和流體布局，其中PC端的布局偏向于使用固定布局。但是移動(dòng)端使用固定布局并不合適，因?yàn)橐苿?dòng)端的屏幕尺寸呈現(xiàn)碎片化。移動(dòng)端web需要有良好的自適應(yīng)性。

1. Flex彈性盒布局

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。可根據(jù)元素的個(gè)數(shù)不同，自動(dòng)填充容器。

1.1 Flex 使用

• 父元素使用flex布局：display:flex；webkit內(nèi)核的瀏覽器加前綴-webkit
• 子元素可按照比例劃分或者混合劃分：

width:100pxflex:2flex:1

一般來說，圖片的寬高是固定的，文字部分按照等比填充。

1.2 Flex 容器屬性

Flex布局思維導(dǎo)圖

namevalue備注

1	flex-direction	row (default) / row-reverse / column / column-reverse;	決定主軸的方向（即項(xiàng)目的排列方向）
2	flex-wrap	nowrap (default) / wrap / wrap-reverse;	默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
3	flex-flow	row nowrap (default)	flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式
4	justify-content	flex-start (default) / flex-end / center / space-between / space-around;	定義了項(xiàng)目在橫向上的對(duì)齊方式。
5	align-items	flex-start/ flex-end / center / baseline / stretch (default);	定義項(xiàng)目在縱向上如何對(duì)齊。
6	align-content	flex-start / flex-end / center / space-between / space-around / stretch (default);	定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

1.3 子元素屬性

namevalue備注

1	order	init	排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
2	flex-grow	number	放大比例，默認(rèn)為0。即如果存在剩余空間，也不放大。
3	flex-shrink	number	縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小
4	flex-basis	length eg:360px	定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
5	flex		flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選
6	align-self	auto / flex-start / flex-end / center / baseline / stretch;	允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

詳細(xì)介紹：Flex布局語法教程

2. 使用媒體查詢 MediaQuery

媒體類型：

• screen （屏幕）
• print （打印機(jī)）
• handheld （手持設(shè)備）
• all （通用）

常用媒體查詢參數(shù)：

• width —— 視口寬度
• height —— 視口高度
• device-height —— 設(shè)備高度
• device-weight —— 設(shè)備高度
• orientation —— 檢查設(shè)備處于橫屏（landscape）還是豎屏（portrait）

設(shè)計(jì)點(diǎn)：

• 使用百分比布局，實(shí)現(xiàn)平滑適應(yīng)
• 使用彈性圖片（外加容器，圖片使用100%寬度）
• 重新布局，顯示與隱藏，隱藏冗余元素 經(jīng)常需要切換位置的元素使用【絕對(duì)定位】，減少重繪，提高渲染性能

權(quán)衡利弊，不要為了響應(yīng)式而響應(yīng)式。

待續(xù)：高清圖片和一像素邊框問題
1. 關(guān)于高清圖片：為了避免圖片產(chǎn)生模糊，圖片的寬高應(yīng)該使用物理像素渲染。
2. 一像素邊框，使用scaleY(.5).

3. 相對(duì)單位 em 和 rem

• em：以父節(jié)點(diǎn)的font-size為相對(duì)單位
• rem ：以html 的font-size 為相對(duì)單位 （推薦）

為了適應(yīng)手機(jī)屏幕 rem = screen.width/10；rem可結(jié)合sass使用。

4. 多行文本溢出 加 ...

-webkit-box-orient:vertical; -webkit-line-clamp: 3

三、終端交互

1、使用自定義Tap事件代替click事件避免300ms問題，（Tap事件可能存在點(diǎn)透bug，遮罩層被點(diǎn)透）。
2、 Touch事件

- touchstart- touchmove- touchend- touchcancel

每個(gè)touch對(duì)象包含以下屬性：

3、彈性滾動(dòng)
body層滾動(dòng)：
自帶彈性滾動(dòng)，overflow：hidden失效，GIF和定時(shí)器暫停
局部滾動(dòng)：

div {overflow: scroll；-webkit-overflow-scrolling: touch; }

4、下拉刷新
使用touch事件，判斷是否拉到頂層，如果是，對(duì)頁面進(jìn)行重新加載。

5、上拉加載
使用scroll事件。

總結(jié)

以上是生活随笔為你收集整理的移动web学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。