移動Web初級入門

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

即將開始涉入移動Web了，有點小興奮也有點小緊張，但願能在將來的團隊裏帶來一些價值。記錄一下我如今所認識的移動Web。

原文摘自個人前端博客，歡迎你們來訪問

原文地址：http://www.hacke2.cn/hello-mobile-aop/

一些基本名詞

初涉移動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的高清視網膜技術卻會使圖片變得模糊，這是爲何呢？

中密度與超高密度(retina)顯示的區別

根據計算公式，一個像素點會被拆分紅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);}
}

 

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

1. 假如須要100×100的圖片，那麼從設計稿(寬爲640)上截取200×200的大小，但設置仍是100*100。寬720的設計稿 ，爲了知足顯示像素爲360的屏幕。這樣就能夠來只有一份設計稿只寫一份代碼了。

另外，多張圖片的顯示能夠進行canvas的繪製，進行GPU渲染。。

背景圖片

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

文字

px單位

傳統PC端經常使用的px來設置大小。由於他比較穩定和精確。

em單位

瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，由於字體大小是固定了的。要解決這個問題，咱們可使用「em」單位。 em有以下特色：

1. em的值並非固定的;
2. 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

一些公司也有本身的框架

• - 騰訊Prohttps://github.com/AlloyTeam/Pro)
• - 百度BlendUI

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

固然還有些爲工具框架

• - iscroll4

參考資料

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