建站教程：響應(yīng)式網(wǎng)站設(shè)計(jì)中常見的3個問題

2020-04-19 09:43:19

字體：大中小

供稿：網(wǎng)友

雖然響應(yīng)式網(wǎng)站布局有很多優(yōu)點(diǎn)，同時(shí)適用于多種設(shè)備，在不同客戶端給用戶提供舒適的瀏覽體驗(yàn)，節(jié)約不同頁面的人力開發(fā)成本，便于SEO優(yōu)化。但是，在我們設(shè)計(jì)響應(yīng)式網(wǎng)站的過程中常會發(fā)現(xiàn)它也存在一些問題，這些問題是怎么產(chǎn)生的呢?又該怎樣解決呢?小編今天列舉了響應(yīng)式網(wǎng)站設(shè)計(jì)中常見的3個問題以及相應(yīng)的解決方法，希望大家能夠從中得到啟發(fā)。

問題1.菜單分行

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

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

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

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

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

問題3.元素失真

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

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

上一篇：站長教程：新手站長建站容易有哪些誤區(qū)？

下一篇：建站教程：網(wǎng)站導(dǎo)航欄的重要性