現在很多人每天都會(huì )使用移動(dòng)設備(平板、真實(shí)手機等)瀏覽網(wǎng)站，言關(guān)于響應式在看到網(wǎng)頁(yè)無(wú)法適應小屏幕時(shí)，設計人們常常選擇退出、認識放棄瀏(╯°□°）╯︵ ┻━┻覽。誤區??響應式設計就是真實(shí)在這種情況下應運而生的，它正逐漸成為網(wǎng)站設計的言關(guān)于響應式主流形式之一，但是設計我們是否真的懂響應(ying)式網(wǎng)站設計(ji)?據不完全統計，不少人對響應式網(wǎng)站??設計都存在著(zhù)以下6個(gè)誤解，認識只(zhi)有解開(kāi)這些"心結"，誤區我們才能夠在網(wǎng)站設計的真實(shí)過(guò)程中有效避免，才( ???)能做出一個(gè)更加用戶(hù)友好的言關(guān)于響應式響應式網(wǎng)站，發(fā)揮網(wǎng)站在吸引顧客、(╬?益?)設計促進(jìn)產(chǎn)品銷(xiāo)售等方面的認識作用。接下來(lái)就和小飛一起看看吧!

響應式設計等ˉ\_(ツ)_/ˉ于移動(dòng)端優(yōu)化

由于現??在移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，誤區手機網(wǎng)站十分火熱，各種移動(dòng)設備推動(dòng)了響應式網(wǎng)站設計┐(′ー｀)┌的產(chǎn)生，很多人在做響應式網(wǎng)站設計時(shí)只考慮移動(dòng)端，認為響應(ying)式網(wǎng)站等同于移動(dòng)端優(yōu)化。其實(shí)響應式設計同移動(dòng)端優(yōu)化是截然不同的，移動(dòng)端優(yōu)化一般是指網(wǎng)站??針對手機站特別優(yōu)化過(guò) ，而響應式網(wǎng)站設計的目的就在于使網(wǎng)頁(yè)適應任(ren)何屏幕，任何比例和寬度的互聯(lián)網(wǎng)產(chǎn)品。在響應式網(wǎng)站中雖然移動(dòng)端效果很重要，但它并(′?ω?`)不是唯一的，我們也還想到大屏幕的設備。而且隨著(zhù)視網(wǎng)膜?顯示屏和視??頻游戲瀏覽器的興起，很多用戶(hù)開(kāi)始在更大的屏幕分辨率下瀏覽網(wǎng)頁(yè)，用戶(hù)上網(wǎng)的情??景越發(fā)多樣。

因此，在設計(???)響應式網(wǎng)站時(shí)，我們最好能將用戶(hù)不同的使(shi)用環(huán)境也考慮進(jìn)(jin)去。想(T_T)想用戶(hù)現在可能正使用什么樣的設備進(jìn)行瀏覽：是手機還是家里內嵌瀏覽器(′_ゝ`)的智能電??視或機頂盒?想想用戶(hù)現在可能在哪?是在零售店排隊還是在野外露營(yíng)?雖然我們一直強調內容是王道，但使用情景也很重要，它直接的決定了用戶(hù)采取哪種設備上網(wǎng)，潛移默化的對用戶(hù)的瀏覽行為產(chǎn)生影響。這也是為什么響應式網(wǎng)站的內容需(xu)要完美適用不同的屏幕分辨率。所以(yi)記??。喉憫骄W(wǎng)站并??不僅僅是移動(dòng)網(wǎng)??站，并不等同于移動(dòng)端優(yōu)化。

響應式設計不必適用于所有用例

過(guò)去人們常常爭論說(shuō)每個(gè)用例(簡(jiǎn)單來(lái)說(shuō)，就是對系統功能的描述)都有各自的特點(diǎn)，響應式網(wǎng)站設計并不是對每個(gè)用例都有效，這是個(gè)很明顯的誤區，因為用例事實(shí)上是響應式網(wǎng)站的重點(diǎn)，網(wǎng)站設計師或開(kāi)發(fā)者必須考慮到??(′_｀)每一個(gè)用例，并且盡可能測試用例的所有??設備，最優(yōu)化網(wǎng)站布局，這樣才更能給用戶(hù)提供良好的瀏覽體驗，用戶(hù)才更可能熱衷于我們的網(wǎng)站。不將這一點(diǎn)牢記于心，是很難做好響應式網(wǎng)站的。

響應式設計只關(guān)注設備斷點(diǎn)

在響應式網(wǎng)站中，我們是通過(guò)ヽ(′▽?zhuān)?ノ媒體查詢(xún)的方式改變網(wǎng)站的布局，在哪種寬度下改變布局，這就是我們常說(shuō)的斷點(diǎn)。在進(jìn)行響應式網(wǎng)站設計時(shí)，很多設計師都習慣于針對某些設備的數據來(lái)設置斷點(diǎn)，最??常見(jiàn)的3種設備當然是電腦(臺式/筆記本，平板，手機)，這樣一來(lái)設計出來(lái)的就是??針對某些設備分辨率的網(wǎng)站。這并不可取，因為屏幕尺寸是靠不住的，它會(huì )??隨著(zhù)科技(′ω｀*)的發(fā)展和人們的喜好不斷變化，舉個(gè)栗子來(lái)說(shuō)，我們的上網(wǎng)習慣已經(jīng)從使用臺式電腦發(fā)展到手機再到今天的智能手機，屏幕由大到小又再次變大，所以我們不應該只┐(′д｀)┌根據屏幕大小、設備的分辨率設置斷點(diǎn)。只注重設ヽ(′ー｀)ノ備斷點(diǎn)，一旦某個(gè)設備的屏幕尺寸發(fā)生變化，我們??就需要及時(shí)修改網(wǎng)站布局，這種過(guò)程???耗時(shí)又耗力。

那么斷點(diǎn)應該怎樣設置呢?在設置斷點(diǎn)(dian)之前我們要明白一點(diǎn)，做??響應式網(wǎng)站是為了讓網(wǎng)站內容對所有用戶(hù)可見(jiàn)，而不是只針對某個(gè)設備的用戶(hù)。所以，斷點(diǎn)最好根據網(wǎng)站ヽ(′▽?zhuān)?ノ的內容設置，當我們的內容在達到一個(gè)零界點(diǎn)時(shí)，比如視覺(jué)效果不夠美觀(guān)或者影??響了網(wǎng)站內容的傳(⊙_⊙)遞分享??，這就是我們想要的斷點(diǎn)。 但是在純粹的視覺(jué)設計階段，我們可能無(wú)法判定內容在什么時(shí)候會(huì )達到臨界點(diǎn)，因此最好的方法是將網(wǎng)站內容與現有的設備相結合確立一個(gè)斷點(diǎn)，絕不??能只關(guān)注??設備的斷點(diǎn)。

響應式設計可以隱藏網(wǎng)站內容

與其他類(lèi)型的網(wǎng)站相比，響應式網(wǎng)站通常會(huì )有比較(jiao)少的空間用來(lái)放置文本和圖片(同時(shí)考慮電腦端和移動(dòng)端)，因此一些站長(cháng)在做響應式網(wǎng)站時(shí)會(huì )將網(wǎng)站的部分內容隱藏起來(lái)。有人認為這是可取的??，但只要仔細想一( ?° ?? ?°)下你就會(huì )知道這個(gè)錯誤很明顯，響應式設計是為了讓網(wǎng)站內容更容易可見(jiàn)，如果我們隱藏網(wǎng)站內容，那為什么還要設計響應式網(wǎng)站呢?而且，我們假設某個(gè)內容或部分是可以隱藏的，我們主觀(guān)的(′?_?`)認為用戶(hù)不需要這個(gè)信息，這可能會(huì )給用戶(hù)帶來(lái)極其糟糕的體驗，那所謂不重要的東西用戶(hù)也許非?？粗?。所以針對空間比較少的問(wèn)題，應該怎么辦呢?其實(shí)(shi)我們可以通過(guò)添加導航鏈接或錨鏈接的方式重新合理安排網(wǎng)站內容，使用多種工具保證網(wǎng)站內容的可讀性。另外，小飛要說(shuō)明一點(diǎn)，通過(guò)CSS布局控制隱藏的內容在用戶(hù)進(jìn)行瀏覽時(shí)??仍然會(huì )被加載，那為什么不提供ヽ(′▽?zhuān)?ノ完整(zheng)的用戶(hù)體驗呢?網(wǎng)站內容在任何設備應該都是統一的，千萬(wàn)不要限制用戶(hù)在某個(gè)設備上(shang)可以獲(′▽?zhuān)?得的信息。

響應式設計扼殺了網(wǎng)站表現力

響應式網(wǎng)站可以適用于多種終端(電腦、手機、pad??等)，這是它的優(yōu)勢所在(zai)，但有些人認為這也是響應式設計(???)的缺點(diǎn)，因為需要同時(shí)兼顧移動(dòng)端和客戶(hù)端，在很多方面(個(gè)性化設計或性能能等方面)會(huì )有很大的局限性，這嚴重影??響了網(wǎng)站的表現力。不可否認，現在很多設計都開(kāi)始變得相似?，版式布局基本一致，圖片來(lái)源大同小異，潮流趨向基本相同，Bootstrap與Foundation的流行甚ヽ(′ー｀)ノ至使得很多設計師直接套用一模ヽ(′▽?zhuān)?ノ一樣的代碼庫、風(fēng)格 。但是，即使使用的工具和資源相差無(wú)幾，如何發(fā)揮擴大網(wǎng)站的表現力的關(guān)鍵還在于我們自(′?｀*)己。

我們可以通過(guò)調整圖像排列方式、使用獨特元素(??如使用六邊形代替方形)、插畫(huà)元素、縮略圖等來(lái)讓自己的網(wǎng)站??脫穎而出(下圖就是一個(gè)很好的栗子)。讓小飛在這給所有人一個(gè)統一的解決方案并不現實(shí)，因為不同的網(wǎng)站目的不同，適合的表現形式也不同， 我們應該找找哪種方式更適合自己的網(wǎng)站，更能夠擴大自己網(wǎng)站的表現力。從某個(gè)程度上??來(lái)說(shuō)，響應式體現的是一種高度適應性的設計思維模式。在探索響應式設計的道路上，響應式本身并不是唯一目的，基于任意設備對頁(yè)面內(nei)容進(jìn)行完美規劃的設計可能更是我們的課題?，F在你還要說(shuō)響應式設計扼殺了你網(wǎng)站的表(biao)現??力嗎?

響應式設計影響排版

響應式網(wǎng)站中的排版也是一個(gè)很讓人頭疼的問(wèn)題，就像我們上面說(shuō)的，在設計師選擇根據移動(dòng)等設備設置斷點(diǎn)時(shí)，遇到不適合的設備時(shí)網(wǎng)站內容可能就無(wú)法很好的顯示出來(lái)，網(wǎng)站排版就會(huì )"遭殃"。所以不少人都覺(jué)得響應式網(wǎng)站上的文字排版很有難度，甚至有些人認為在響應式網(wǎng)站上就做不好排版。其實(shí)，做好網(wǎng)站┐(′д｀)┌的排版并沒(méi)有想象中那么困難，一方面，我們(′?｀)應該注重網(wǎng)站的內容，內容是王道。我們應該致力于怎樣讓用戶(hù)更快速、更容易得到信息，保證內容的可讀性，同時(shí)記住響應式網(wǎng)站的設計應該結合內容和設備來(lái)設置斷點(diǎn)。

另一方面，響應式網(wǎng)站就是(shi)關(guān)于如何恰當布局的問(wèn)題。在這點(diǎn)上，ems是一個(gè)很好的工具。"Ems"(em)是網(wǎng)頁(yè)媒體文檔的一個(gè)度量單位，我們可以使用它設置字體、內外邊距來(lái)合理規劃網(wǎng)站排版，增強網(wǎng)站內(nei)容的可讀性。這是因為ems是一個(gè)可縮放的相關(guān)單位，它可以根據父級元素的字體大小進(jìn)行相對應的縮放，這意味著(zhù)不管字體增大還是(′_｀)縮小，網(wǎng)站的布局也會(huì )相應的進(jìn)行調整，排??版不會(huì )有任何變形。由于其可伸縮性和適應移動(dòng)(dong)設備的特( ?° ?? ?°)性，ems在we(′Д` )b文檔中正變得越來(lái)越受歡迎。

下面是關(guān)于ems的一個(gè)栗子??，假設這有兩個(gè)結合內容和設備設置的斷點(diǎn)，一個(gè)是高分辨率的??電腦，另一個(gè)是小屏幕的平板電腦。一個(gè)ems等(deng)于當前的字體大小，例如，基本字體是16px，1em就等于16px，為了在3840*2160分辨率的電腦上更好的瀏覽，我們將基本字體增大到22px，同樣，在800*600分辨率的平板電腦上，我們將基本字體減小到14px?，F在兩個(gè)設定斷點(diǎn)(一大一小)上網(wǎng)站的布局已經(jīng)完全改變了。在分辨率比較大的電腦上顯示的網(wǎng)站上，1.4em的標題，基本字體22p(′ω｀)x，這意味著(zhù)1.4em等于30.8px，但在(zai)分辨率較小的平板電腦上，1.4em??的標題，基本字體14px，這里1.4em等于19.6px。從這可以看出em在本質(zhì)上是可伸縮的，盡管網(wǎng)站字(′_ゝ`)體已經(jīng)變成大或變小，我們都無(wú)需擔???心網(wǎng)站布局的破壞，因為它會(huì )隨著(zhù)字體的變化適當進(jìn)行自我調整。只要我們??好好利用這些相對單位，響應式網(wǎng)站的整體布局和排版就可以?很美觀(guān)。