問題1.菜單分行

 

如果你在網(wǎng)頁的上方使用了導(dǎo)航欄，當(dāng)這個(gè)頁面在小屏幕的設(shè)備上呈現(xiàn)時(shí)，響應(yīng)式設(shè)計(jì)通常會(huì)將這個(gè)導(dǎo)航菜單壓縮到更緊湊的格式，以在小屏幕中實(shí)現(xiàn)良好的呈現(xiàn)。但這并不總是有效的，如果顯示區(qū)域比斷點(diǎn)要寬(斷點(diǎn)，通俗來講就是換行處)，又不足夠在一行中將所有的菜單逐一呈現(xiàn)出來，這時(shí)就會(huì)出現(xiàn)菜單分行的情況(見下圖，紅色欄即為分行的菜單欄)。導(dǎo)航菜單在頁面的上方，訪客訪問網(wǎng)站時(shí)很容易就會(huì)注意到這一點(diǎn)，菜單分行會(huì)給用戶留下比較差的第一印象。那么怎樣才能避免菜單分行情況的發(fā)生呢?

 

解決這個(gè)問題有好幾種方法，第一種方法就是減少導(dǎo)航菜單上水平展示的菜單欄的數(shù)量。當(dāng)菜單欄選項(xiàng)較多時(shí)，我們可以對它們進(jìn)行相應(yīng)的整合，分成類別和子類別。子類別可以在用戶選擇類別的時(shí)候通過下拉菜單的方式顯示，這樣橫排的菜單欄就會(huì)減少了。第二種方法就是將斷點(diǎn)設(shè)為更低的值。斷點(diǎn)的實(shí)際值應(yīng)該是導(dǎo)航菜單可能無法顯現(xiàn)的寬度，而不是某個(gè)特定設(shè)備的尺寸。

 

問題2.使用固定寬度的圖片

 

網(wǎng)站的內(nèi)容區(qū)域一般隨視窗的大小而改變，所以當(dāng)一個(gè)固定寬度的圖片比內(nèi)容區(qū)域要寬的時(shí)候，圖片就會(huì)被剪裁，只在屏幕上顯示一部分。下面的是使用固定寬度圖片典型的一個(gè)栗子，頁面圖片和內(nèi)容在電腦上顯示的很好，但是由于手機(jī)尺寸相對電腦而言較小，可顯示的內(nèi)容區(qū)域也有所縮小，這時(shí)部分圖片不能一下子顯示出來，只能借助圖片滾動(dòng)條。本來用戶選擇手機(jī)瀏覽網(wǎng)站就是奔著快速、便捷去的，現(xiàn)在卻要滑動(dòng)滾動(dòng)條查看全圖，這種瀏覽體驗(yàn)對用戶來說實(shí)在是太糟糕了，一點(diǎn)都沒有發(fā)揮響應(yīng)式布局的優(yōu)點(diǎn)。

 

這個(gè)問題要怎么解決呢?我們可以給圖片設(shè)置相關(guān)單位，或者使用支持響應(yīng)式的框架(比如Bootstrap)， 用響應(yīng)式圖片class名來控制(例如class="img-responsive")。同樣的元素在使用響應(yīng)式圖片class名控制后，圖片可以在手機(jī)上很好的展現(xiàn)，圖片的滾動(dòng)條也消失了(見下圖)。

 

問題3.元素失真

 

這個(gè)問題可能聽上去更加抽象，但是當(dāng)響應(yīng)式網(wǎng)站在小屏幕設(shè)備如手機(jī)上呈現(xiàn)時(shí)，它又真實(shí)的發(fā)生著。打個(gè)比方來說，未經(jīng)處理過的列變成了行，這就是一種形式的元素失真，這樣聽上去是不是會(huì)更有概念一些?元素失真并不是一個(gè)簡單的問題，因?yàn)樗３?huì)影響網(wǎng)站的這個(gè)布局結(jié)構(gòu)。比如在下圖中，在電腦中3個(gè)圖片或文本是并列的，但在手機(jī)上顯示時(shí)第3個(gè)圖片或文本就單獨(dú)成一行了，這影響了網(wǎng)站內(nèi)容的整體結(jié)構(gòu)。

 

對于解決元素失真這個(gè)問題其實(shí)很簡單：明確的設(shè)置網(wǎng)站各個(gè)元素的高、寬和內(nèi)邊距，但是意外的是很多人還在糾結(jié)怎樣解決這個(gè)問題。另外，如果某個(gè)元素不在它應(yīng)在的位置，覆蓋住了其他元素，我們可以使用div(簡單來說div就是一個(gè)塊狀的東西，有人稱它為盒子，我們可以將網(wǎng)站中的各個(gè)元素分類放進(jìn)去，便于網(wǎng)站布局管理)，設(shè)置外邊距，讓它回到原本的位置。