最好的閱讀是輸出。 –玉伯

即將開始涉入移動Web了，有點小興奮也有點小緊張，希望能在未來的團隊里帶來一些價值。記錄一下我現在所認識的移動Web。

一些基本名詞

初涉移動Web，會有一些基本的名稱需要掌握，什么設備像素比呀，移動端Web的內核呀，viewport呀，屏幕的的最小物理單位呀。我已經記錄了一些，以后還得繼續補充。

• - 常見移動Web名詞

關于布局

我們來看看移動端最常見的布局：

下面實現上述頁面常見移動Web布局三種方法：

• fixed
• absolute
• flexbox

fixed

對于第一種布局，其實現原理就是header和footer部分都為fixed定位。內容頁面可以使用-webkit-overflow-scrolling:touch來進行滾動，當然，對于不支持的，也可以使用iscroll來兼容。
fixed布局網上人說坑太多，滾動的時候bug太多，特別是表單元素時彈出輸入法會有很多問題，所以不建議使用，以下是一些網上參考的資料：

• - 移動Web開發實踐——解決position:fixed自適應BUG
• - 移動端web頁面使用position:fixed問題總結
• - 移動Web開發，4行代碼檢測瀏覽器是否支持position:fixed

absolute

和fixed一樣，只不過將fixed定位設為絕對定位。設定其left,right等值。下面有一個絕對定位的DEMO。

• - 絕對定位的DEMO

flexbox

flexbox布局我估計是仿照flex*布局方式。由于主流移動端都使用的現代瀏覽器都支持這個CSS3屬性。Flexbox布局俗稱伸縮布局，它可以簡單快速的創建一個具有彈性功能的布局。由于移動多終端的需求，所以首選是flexbox。

• - flexbox的DEMO
• - [譯]flexbox全揭秘

圖片與文字

非背景圖片

之前提到的常見移動Web名詞，設備像素比：2的高清視網膜技術卻會使圖片變得模糊，這是為什么呢？

根據計算公式，一個像素點會被拆分成4個小點，顯示起來自然模糊了。

解決方案一般有兩個：

1.設置target-densitydpi=device-dpi，采用按照真實比例來展示，然后進行媒體查詢技術如下面代碼：

#header { background:url (medium-density-image.png); } @media screen and (- webkit -device-pixel-ratio:1.5) { /* CSS for high-density screens */ #header { background:url (high-density-image.png);} } @media screen and (- webkit -device-pixel-ratio:0.75) { /* CSS for low-density screens */ #header { background:url (low-density-image.png);} }

這樣有一個弊端就是：需要為每一種分辨率書寫單獨的代碼。

假如需要100×100的圖片，那么從設計稿(寬為640)上截取200×200的大小，但設置還是100*100。寬720的設計稿 ，為了滿足顯示像素為360的屏幕。這樣就可以來只有一份設計稿只寫一份代碼了。
經過@飛天小黑神豬的提示，也可以使用srcset和-webkit-image-set。

另外，多張圖片的顯示可以進行canvas的繪制，進行GPU渲染。。

背景圖片

background-size設置為高度，自適應寬度100%，這也是CSS3的屬性。

文字

px單位

傳統PC端常用的px來設置大小。因為他比較穩定和精確。

em單位

瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，因為字體大小是固定了的。要解決這個問題，我們可以使用“em”單位。
em有如下特點：

em的值并不是固定的;

em會繼承父級元素的字體大小。

rem單位

rem是CSS3的屬性，和em一樣，他的值是不固定的。區別在于他參考的是一個根元素的確定值。em是相對于其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個參考值。

在了解了px,em,rem的區別后，我們可以進行如下設置：

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; }

我們在寫大小的時候通過一些簡單的計算就可以了，比如的拿到的設計稿有一一部分為18px的文字，那我們在寫代碼的時候就可以寫：

p : {font-size:18px；font-size:1.8rem}/*(1.8 x 10=18)*/

動畫

在移動端不用過多考慮平臺端的兼容性，完成動畫也是借助CSS3的動畫來實現。

在我看來，移動端動畫優先選擇為以下順序：

transition > Animation > js

而且最好使用translate3d強制設備進行GPU渲染，但也不能過度使用。
我們可以使用CSS3動畫庫animate.css玩完成常見的動畫。更多關于CSS3動畫的可以參考：

• - CSS動畫簡介

一些事件

移動端原生的最重要的事件touch ：

• touchstart
• touchmove
• touchend
• touchcancel

其中，他們之間觸發的先后順序為：

touchstart > touchmove > touchend > click

移動端click會延遲300ms，原因是他在等待判斷是不是雙擊。當然，現在的一些框架解決了這個問題：

• - fastclick
• - tap.js

用這幾個事件可以衍生出很多事件，比如左滑右滑，上下滑屏，放大，縮放等。詳情可以看指尖上的JS系列。

• - 指尖下的js ——多觸式web前端開發之一：對于Touch的處理
• - 指尖下的js ——多觸式web前端開發之二：處理簡單手勢
• - 指尖下的js —— 多觸式web前端開發之三：處理復雜手勢

現在已經有一些封裝了的框架：

• - hammer.js
• - touch.js

當然還有其他移動端專屬的事件，比如：

• 觸摸事件
• 屏幕旋轉事件

我用原生JS模仿了神馬搜索搜出美團后的信息輪播：

• - 移動端訪問

一些框架

移動端有一些較為成熟框架：

• - JQuery Mobile
• - JQTouch

一些公司也有自己的框架

• - 騰訊Pro
• - 百度BlendUI

但更多公司選擇使用一些基礎的類庫自己封裝一些常見的交互，畢竟在移動端上流量真的是寸土必爭。比如神馬搜索用的是zepto.js。通過gzip壓縮后只有幾k，而且風格與JQ一模一樣，無學習成本。

當然還有些為工具框架

• - iscroll4

參考資料

• jtyjty99999收集移動端開發所需要的一些資源與小技巧
• [譯]flexbox全揭秘
• 移動端重構系列3——整體布局
• 移動端webapp開發必備知識
• CSS3的REM設置字體大小
• 設備像素比devicePixelRatio簡單介紹
• 使用CSS3開啟GPU硬件加速提升網站動畫渲染性能

總結

以上是生活随笔為你收集整理的移动Web初级入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。