建站教程：響應式網站設計中常見的3個問題

2020-04-19 09:43:19

字體：大中小

來源：轉載

供稿：網友

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

問題1.菜單分行

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

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

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

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

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

問題3.元素失真

這個問題可能聽上去更加抽象，但是當響應式網站在小屏幕設備如手機上呈現時，它又真實的發生著。打個比方來說，未經處理過的列變成了行，這就是一種形式的元素失真，這樣聽上去是不是會更有概念一些?元素失真并不是一個簡單的問題，因為它常常會影響網站的這個布局結構。比如在下圖中，在電腦中3個圖片或文本是并列的，但在手機上顯示時第3個圖片或文本就單獨成一行了，這影響了網站內容的整體結構。

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

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

下一篇：建站教程：網站導航欄的重要性