響應式開發總結

相關文檔

W3C:http://www.w3.org/

Safari:https://developer.apple.com/library/safari/navigation/index.html

Chrome:http://docs.webplatform.org/wiki/Main_Page/zh-hans

IE:http://msdn.microsoft.com/zh-cn/ie/

Mozilla:https://developer.mozilla.org/zh-CN/

文檔裏面的內容不少很雜，通常用法是想知道啥直接進去搜索。

響應式

Ethan Marcotte在2010年5月份提出的一個概念，旨在讓一個網站同時兼容多種設備，而不是爲不一樣設備定製不一樣的版本。若是把咱們的網站看作一個程序的話，響應式設計要求網站能提供更多用戶端可選的參數，讓用戶擁有更多的控制權。

字體大小響應

這裏的字體大小指的是用戶本身設置或者設備的默認字體大小。一樣是12px大小的字符在不一樣設備上對用戶的觀感是不同的，可是設備總會提供一個觀感還不錯的默認字體大小（或者用戶本身指定的）。因此爲了讓咱們的網站的文字在不一樣設備上也能有不錯的觀感，網站應該使用em代替px。em定義的是一個相對大小，設計者經過它能夠定義哪些地方的字應該大一些，哪些地方的字應該小一些，可是不規定哪些地方的字必須多大。

屏幕尺寸響應

屏幕尺寸是咱們主要須要響應的地方，屏幕的尺寸大小，寬高比等因素都會影響咱們的佈局，內容的的大小等。比較經常使用用來解決尺寸的佈局方式有固定佈局，流動佈局，柵格佈局，這些佈局方式經常混合使用。

1. 固定佈局：頁面居中，兩邊留白，他能適應大於某個值必定範圍的寬度，可是若是太寬就會有不少留白，太窄會出現滾動條，在PC頁面上很常見。
2. 流動佈局：屏幕尺寸在必定範圍內變化時，不改變模塊佈局，只改變模塊尺寸比例。比固定佈局更具響應能力，兩邊不留白，可是也只能適應有限的寬度變化範圍，不然模塊會被擠（拉）得不成樣子。
3. 自定義佈局：上面幾種佈局方式都沒法跨域大尺寸變化，因此適當時候咱們須要改變模塊的位置排列或者隱藏一些次要元素。
4. 柵格佈局：這種佈局方式使得模塊之間很是容易對齊，易於模塊位置的改變用於輔助自定義佈局。

屏幕精度響應

屏幕間的像素精度差別致使固定像素在不一樣設備上實際尺寸會有比較大的差異，爲了解決這個問題咱們使用彈性佈局，彈性佈局採用em做爲單位，其緣由和「字體大小響應」中提到的同樣。可是因爲使用了em做爲單位，使得咱們其實是沒法得知界面實際尺寸的，這回致使頁面上的圖片有可能過大（浪費帶寬）或者太小（模糊），因此對於圖片咱們須要根據實際須要的大小選擇性加載對應的尺寸版本。另外在最新（ipad3，iphone4）的IOS設備上，1px實際上會佔4px（因爲像素密度高），因此圖片精度對於這些問題都要單獨處理。

交互方式響應

不一樣的設備支持不一樣的交互方式，多是觸屏或者鼠標操做，再多是按鍵操做。這裏能夠採用「漸進加強」的方式，爲用戶定義基本的操做方式，而在先進的設備上提供更接地氣的操做（好比手勢）。

網絡情況響應

用戶在慢速網絡的狀況下能夠選擇不下載一些消耗帶寬的資源。

其餘功能響應

好比GPS，陀螺儀，電話等功能

使用場景響應

好比用戶在車上，仍是在走路，能夠根據這些狀況提供給用戶不一樣的操做體驗。

用戶偏好響應

不一樣的用戶有着不一樣的偏好，好比左右手，操做習慣，反映速度，眼睛辨別能力，網站均可以考慮作出響應。

響應式的誤區

我要響應哪些設備？

設計響應式的目的是爲了應付如今的設備或者未來未知的設備，像最開始的比喻，若是網站是個程序，那麼響應式網站能夠提供更多參數選項。而且，若是你提供了這個參數，那麼就要作好它多是任何值的準備，至少是心理準備。設計師在設計的時候能夠拿一些典型設備作參照，可是最後你要忘掉這些設備。

是否是響應的設備類型越多越好？

響應式設計是一個抽象，有挑戰性的工做，在設計中爲了兼容不一樣的設備須要權衡捨棄一些本來在特定設備上更好的設計。而且在前端上爲了要兼容不一樣設備，也須要作大量兼容性處理。響應得設備類型越多意味着設計的限制越多，前端須要作的工做越多，成本越高，而體驗卻只降不升。因此根據產品需求響應得適可而止就好了。

移動端用到的前端技術

Media Query

用於查詢設備是否符合某一特定條件，它能夠在css中，link標籤屬性中，js中使用。這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。咱們能夠根據這些信息來對頁面作一些特殊處理從而達到響應目的。

相關連接和用法：http://www.w3.org/TR/css3-mediaqueries/，http://www.w3.org/TR/cssom-view/

在ie8及如下不支持Media Query，能夠經過https://github.com/scottjehl/Respond兼容。

使用em作尺寸單位

用於文字大小的響應和彈性佈局。

禁止頁面縮放

本來IOS手機頁面爲了兼容pc的頁面默認屏幕寬度爲800，並進行了縮小。可是做爲專門爲移動端設計的頁面咱們並不須要這種處理，因此經過以下代碼去除縮放。這個代碼被主流移動瀏覽器兼容。

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

相關連接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

去除點擊高亮

在移動端點擊一個可點擊元素默認會出現一個元素大小的半透明顏色覆蓋到元素上。這是爲了讓用戶感受到這個元素已經被點擊了。但有時候這個效果不是咱們但願的，能夠經過以下全局css設置把它去掉

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

該屬性在webkit內核瀏覽器上有效，參考連接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//appleref/doc/uid/TP30001266-webkit_taphighlightcolor

但在移動端IE10上，須要以下代碼才能去除

<meta name="msapplication-tap-highlight" content="no" />

參考：http://msdn.microsoft.com/zh-cn/library/ie/bg182645

滾動回彈特效

經過overflow:scroll可使內容能夠滾動，可是沒有物理彈性，比較生硬，沒有滾動條。若是想要IOS那種彈性的滾動效果可使用css

-webkit-overflow-scrolling:touch;

可是加上這個css後會產生滾動條（一般不顯示，滾動才顯示）。非要去掉滾動條只能經過JS模擬，經過這個Kissy組件能夠作到：https://github.com/hongru/kissy-mscroller，須要直接引用fakescroller，若是直接引用index會在IOS平臺自動變成-webkit-overflow-scrolling。

觸摸事件

四種基本觸摸事件

目前Safari只支持TouchEvent和GestureEvent，其餘手勢須要本身定義。TouchEvent主要有touchstart，touchmove，touchend，touchcancel四種。參考連接：https://developer.apple.com/library/safari/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html

觸摸屏上的鼠標事件

同時Safari幫你模擬了鼠標事件，可是click事件會有明顯的延遲。通常採用封裝好的手勢框架去模擬tap操做代替click。Kissy的Event模塊帶有tap事件。可是在點擊一個綁了tap事件的元素時，周圍有能夠點擊（click）的元素，那麼手指可能會觸碰到這個元素，致使tap事件和click事件均被觸發。可是click事件觸發會在tap事件以後，因此我臨時的解決方案是在tap事件發生後阻止document上全部的click事件一段時間（500毫秒）。

參考連接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

觸摸屏上的僞類

另外在Safari上使用hover和active位類時，手指點擊一次連接，那麼那個連接的hover會被一直觸發，若是長按一個連接，那麼他的active會被一直觸發。因此目前看來使用css僞類是不保險的，只能經過js模擬。

video元素在Safari上對觸摸事件的影響

iphone平臺的video元素所在區域會被屏蔽全部觸摸事件，並且是和DOM結構無關的區域性屏蔽，一個元素被絕對定位到video元素區域也會被屏蔽事件，而且video被overflow:hidden以後一樣。因此想在iphone上作一個視頻點擊播放這種效果，只能本身弄張圖片和一個播放按鈕，而後點擊後調用一個舞臺外的video元素播放。 ipad平臺一樣存在這個問題，可是若是把video標籤的controls屬性去掉就能恢復正常。這意味着想要解決這個問題必須自定義UI而不能使用系統UI。 我認爲這個問題應該是IOS平臺自帶的UI形成的，只是iphone沒法經過controls屬性去掉UI。

scroll與touchmove

在Safari上scroll事件不如PC上發生得那麼頻繁，只有在頁面滾動動畫結束以後纔會很吝嗇得發生一次。若是須要比較實時得檢測用戶把頁面拖動到什麼位置了，建議使用touchmove事件。