响应式开发总结
相關(guān)文檔
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/
文檔里面的內(nèi)容很多很雜，一般用法是想知道啥直接進(jìn)去搜索。
響應(yīng)式
Ethan Marcotte在2010年5月份提出的一個(gè)概念，旨在讓一個(gè)網(wǎng)站同時(shí)兼容多種設(shè)備，而不是為不同設(shè)備定制不同的版本。如果把我們的網(wǎng)站看做一個(gè)程序的話，響應(yīng)式設(shè)計(jì)要求網(wǎng)站能提供更多用戶端可選的參數(shù)，讓用戶擁有更多的控制權(quán)。
字體大小響應(yīng)
這里的字體大小指的是用戶自己設(shè)置或者設(shè)備的默認(rèn)字體大小。同樣是12px大小的字符在不同設(shè)備上對(duì)用戶的觀感是不一樣的，但是設(shè)備總會(huì)提供一個(gè)觀感還不錯(cuò)的默認(rèn)字體大小（或者用戶自己指定的）。所以為了讓我們的網(wǎng)站的文字在不同設(shè)備上也能有不錯(cuò)的觀感，網(wǎng)站應(yīng)該使用em代替px。em定義的是一個(gè)相對(duì)大小，設(shè)計(jì)者通過(guò)它可以定義哪些地方的字應(yīng)該大一些，哪些地方的字應(yīng)該小一些，但是不規(guī)定哪些地方的字必須多大。
屏幕尺寸響應(yīng)
屏幕尺寸是我們主要需要響應(yīng)的地方，屏幕的尺寸大小，寬高比等因素都會(huì)影響我們的布局，內(nèi)容的的大小等。比較常用用來(lái)解決尺寸的布局方式有固定布局，流動(dòng)布局，柵格布局，這些布局方式常常混合使用。
屏幕精度響應(yīng)
屏幕間的像素精度差異導(dǎo)致固定像素在不同設(shè)備上實(shí)際尺寸會(huì)有比較大的差別，為了解決這個(gè)問(wèn)題我們使用彈性布局，彈性布局采用em作為單位，其原因和“字體大小響應(yīng)”中提到的一樣。但是由于使用了em作為單位，使得我們實(shí)際上是無(wú)法得知界面實(shí)際尺寸的，這回導(dǎo)致頁(yè)面上的圖片有可能過(guò)大（浪費(fèi)帶寬）或者過(guò)小（模糊），所以對(duì)于圖片我們需要根據(jù)實(shí)際需要的大小選擇性加載對(duì)應(yīng)的尺寸版本。另外在最新（ipad3，iphone4）的IOS設(shè)備上，1px實(shí)際上會(huì)占4px（由于像素密度高），所以圖片精度對(duì)于這些問(wèn)題都要單獨(dú)處理。
交互方式響應(yīng)
不同的設(shè)備支持不同的交互方式，可能是觸屏或者鼠標(biāo)操作，再可能是按鍵操作。這里可以采用“漸進(jìn)增強(qiáng)”的方式，為用戶定義基本的操作方式，而在先進(jìn)的設(shè)備上提供更接地氣的操作（比如手勢(shì)）。
網(wǎng)絡(luò)狀況響應(yīng)
用戶在慢速網(wǎng)絡(luò)的情況下可以選擇不下載一些消耗帶寬的資源。
其他功能響應(yīng)
比如GPS，陀螺儀，電話等功能
使用場(chǎng)景響應(yīng)
比如用戶在車上，還是在走路，可以根據(jù)這些情況提供給用戶不同的操作體驗(yàn)。
用戶偏好響應(yīng)
不同的用戶有著不同的偏好，比如左右手，操作習(xí)慣，反映速度，眼睛辨別能力，網(wǎng)站都可以考慮做出響應(yīng)。
響應(yīng)式的誤區(qū)
我要響應(yīng)哪些設(shè)備？
設(shè)計(jì)響應(yīng)式的目的是為了應(yīng)付現(xiàn)在的設(shè)備或者將來(lái)未知的設(shè)備，像最開始的比喻，如果網(wǎng)站是個(gè)程序，那么響應(yīng)式網(wǎng)站可以提供更多參數(shù)選項(xiàng)。并且，如果你提供了這個(gè)參數(shù)，那么就要做好它可能是任何值的準(zhǔn)備，至少是心理準(zhǔn)備。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候可以拿一些典型設(shè)備做參照，但是最后你要忘掉這些設(shè)備。
是不是響應(yīng)的設(shè)備類型越多越好？
響應(yīng)式設(shè)計(jì)是一個(gè)抽象，有挑戰(zhàn)性的工作，在設(shè)計(jì)中為了兼容不同的設(shè)備需要權(quán)衡舍棄一些原本在特定設(shè)備上更好的設(shè)計(jì)。并且在前端上為了要兼容不同設(shè)備，也需要做大量兼容性處理。響應(yīng)得設(shè)備類型越多意味著設(shè)計(jì)的限制越多，前端需要做的工作越多，成本越高，而體驗(yàn)卻只降不升。所以根據(jù)產(chǎn)品需求響應(yīng)得適可而止就行了。
移動(dòng)端用到的前端技術(shù)
Media Query
用于查詢?cè)O(shè)備是否符合某一特定條件，它可以在css中，link標(biāo)簽屬性中，js中使用。這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。我們可以根據(jù)這些信息來(lái)對(duì)頁(yè)面做一些特殊處理從而達(dá)到響應(yīng)目的。
相關(guān)鏈接和用法：http://www.w3.org/TR/css3-mediaqueries/，http://www.w3.org/TR/cssom-view/
在ie8及以下不支持Media Query，可以通過(guò)https://github.com/scottjehl/Respond兼容。
使用em做尺寸單位
用于文字大小的響應(yīng)和彈性布局。
禁止頁(yè)面縮放
原本IOS手機(jī)頁(yè)面為了兼容pc的頁(yè)面默認(rèn)屏幕寬度為800，并進(jìn)行了縮小。但是作為專門為移動(dòng)端設(shè)計(jì)的頁(yè)面我們并不需要這種處理，所以通過(guò)如下代碼去除縮放。這個(gè)代碼被主流移動(dòng)瀏覽器兼容。
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" /> 相關(guān)鏈接：https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
去除點(diǎn)擊高亮
在移動(dòng)端點(diǎn)擊一個(gè)可點(diǎn)擊元素默認(rèn)會(huì)出現(xiàn)一個(gè)元素大小的半透明顏色覆蓋到元素上。這是為了讓用戶感覺(jué)到這個(gè)元素已經(jīng)被點(diǎn)擊了。但有時(shí)候這個(gè)效果不是我們希望的，可以通過(guò)如下全局css設(shè)置把它去掉
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);該屬性在webkit內(nèi)核瀏覽器上有效，參考鏈接： https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//appleref/doc/uid/TP30001266-webkit_taphighlightcolor
但在移動(dòng)端IE10上，需要如下代碼才能去除
<meta name="msapplication-tap-highlight" content="no" />參考：http://msdn.microsoft.com/zh-cn/library/ie/bg182645
滾動(dòng)回彈特效
通過(guò)overflow:scroll可以使內(nèi)容可以滾動(dòng)，但是沒(méi)有物理彈性，比較生硬，沒(méi)有滾動(dòng)條。如果想要IOS那種彈性的滾動(dòng)效果可以使用css
-webkit-overflow-scrolling:touch;但是加上這個(gè)css后會(huì)產(chǎn)生滾動(dòng)條（通常不顯示，滾動(dòng)才顯示）。非要去掉滾動(dòng)條只能通過(guò)JS模擬，通過(guò)這個(gè)Kissy組件可以做到：https://github.com/hongru/kissy-mscroller，需要直接引用fakescroller，如果直接引用index會(huì)在IOS平臺(tái)自動(dòng)變成-webkit-overflow-scrolling。
觸摸事件
四種基本觸摸事件
目前Safari只支持TouchEvent和GestureEvent，其他手勢(shì)需要自己定義。TouchEvent主要有touchstart，touchmove，touchend，touchcancel四種。參考鏈接：https://developer.apple.com/library/safari/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
觸摸屏上的鼠標(biāo)事件
同時(shí)Safari幫你模擬了鼠標(biāo)事件，但是click事件會(huì)有明顯的延遲。一般采用封裝好的手勢(shì)框架去模擬tap操作代替click。Kissy的Event模塊帶有tap事件。但是在點(diǎn)擊一個(gè)綁了tap事件的元素時(shí)，周圍有可以點(diǎn)擊（click）的元素，那么手指可能會(huì)觸碰到這個(gè)元素，導(dǎo)致tap事件和click事件均被觸發(fā)。但是click事件觸發(fā)會(huì)在tap事件之后，所以我臨時(shí)的解決方案是在tap事件發(fā)生后阻止document上所有的click事件一段時(shí)間（500毫秒）。
參考鏈接： https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1觸摸屏上的偽類
另外在Safari上使用hover和active位類時(shí)，手指點(diǎn)擊一次鏈接，那么那個(gè)鏈接的hover會(huì)被一直觸發(fā)，如果長(zhǎng)按一個(gè)鏈接，那么他的active會(huì)被一直觸發(fā)。所以目前看來(lái)使用css偽類是不保險(xiǎn)的，只能通過(guò)js模擬。
video元素在Safari上對(duì)觸摸事件的影響
iphone平臺(tái)的video元素所在區(qū)域會(huì)被屏蔽所有觸摸事件，而且是和DOM結(jié)構(gòu)無(wú)關(guān)的區(qū)域性屏蔽，一個(gè)元素被絕對(duì)定位到video元素區(qū)域也會(huì)被屏蔽事件，并且video被overflow:hidden之后同樣。所以想在iphone上做一個(gè)視頻點(diǎn)擊播放這種效果，只能自己弄張圖片和一個(gè)播放按鈕，然后點(diǎn)擊后調(diào)用一個(gè)舞臺(tái)外的video元素播放。 ipad平臺(tái)同樣存在這個(gè)問(wèn)題，但是如果把video標(biāo)簽的controls屬性去掉就能恢復(fù)正常。這意味著想要解決這個(gè)問(wèn)題必須自定義UI而不能使用系統(tǒng)UI。 我認(rèn)為這個(gè)問(wèn)題應(yīng)該是IOS平臺(tái)自帶的UI造成的，只是iphone無(wú)法通過(guò)controls屬性去掉UI。
scroll與touchmove
在Safari上scroll事件不如PC上發(fā)生得那么頻繁，只有在頁(yè)面滾動(dòng)動(dòng)畫結(jié)束之后才會(huì)很吝嗇得發(fā)生一次。如果需要比較實(shí)時(shí)得檢測(cè)用戶把頁(yè)面拖動(dòng)到什么位置了，建議使用touchmove事件。
原文地址：http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html總結(jié)
- 上一篇： vue3解读—reactivity响应式
- 下一篇： 响应式网页字体图标