什么是響應(yīng)式設(shè)計？做響應(yīng)式設(shè)計時需要避免的常見誤區(qū)有哪些？

現(xiàn)在很多站長在做網(wǎng)站時都比較傾向于響應(yīng)式設(shè)計，這是因為一個響應(yīng)式網(wǎng)站就可以完全適應(yīng)不同尺寸的設(shè)備。除此以外，響應(yīng)式網(wǎng)站也沒有縮放布局和流式布局的一些缺點。但在設(shè)計響應(yīng)式網(wǎng)站時我們也要多加注意，仔細規(guī)劃，才能更好的發(fā)揮這種設(shè)計的效用。今天這篇文章主要就是講解縮放、流式和響應(yīng)式布局的區(qū)別，響應(yīng)式網(wǎng)站常見的3個誤區(qū)，以及如何避免走進這些誤區(qū)。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、大埔網(wǎng)絡(luò)推廣、微信小程序、大埔網(wǎng)絡(luò)營銷、大埔企業(yè)策劃、大埔品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供大埔建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

縮放布局VS流式布局VS響應(yīng)式布局

很多人經(jīng)常會弄混這三個概念，認為它們都差不多，可以隨意替換使用。事實上，每一個概念都是不同的，都是不同科技發(fā)展階段流行的網(wǎng)站布局方式。接下來小飛就帶大家看看這3種網(wǎng)站布局設(shè)計的區(qū)別。

縮放布局 是指對網(wǎng)站中的每個元素進行縮放。從某種程度上來說，縮放布局有點響應(yīng)式設(shè)計的味道，因為它會根據(jù)視窗尺寸的改變相應(yīng)的縮放網(wǎng)站上的內(nèi)容。不過，它與響應(yīng)式布局的差別就在于，在進行縮放時，窗口整體布局是靜止不動的，只改變網(wǎng)站里的每個元素，使它們協(xié)調(diào)一致。下圖為縮放布局在不同屏幕分辨率中的呈現(xiàn)，這種設(shè)計可以保證網(wǎng)站各種元素的協(xié)調(diào)一致，但這是以犧牲網(wǎng)站內(nèi)容的可讀性為代價的。

流式布局， 也叫作百分比布局，是指將元素的寬、高、內(nèi)邊距，外邊距設(shè)置成百分比，而不使用固定數(shù)值，這樣一來網(wǎng)站元素可以根據(jù)頁面的尺寸隨時調(diào)整。通常，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前頁尾，所以人們形象的稱之為流式布局。這種布局方式在web前端開發(fā)的早期歷史上有很廣泛的使用，適用于不同尺寸的PC屏幕(那時屏幕的尺寸差異不會太大)。但是現(xiàn)在很多人使用手機瀏覽網(wǎng)頁，使用這種布局方式設(shè)計網(wǎng)站，可能就會影響圖片、文字在小屏幕設(shè)備上的顯示效果，破壞網(wǎng)站的協(xié)調(diào)性、一致性。下圖是流式布局在不同屏幕分辨器上的呈現(xiàn)，這種設(shè)計能夠提供用戶舒適的閱讀體驗但是忽略了網(wǎng)站元素的整體一致。

響應(yīng)式布局是 隨著媒體查詢技術(shù)的出現(xiàn)而問世的，它主要是為了解決不同設(shè)備之間的兼容問題(一般是指PC，平板，手機等分辨率差異較大的設(shè)備)。這種技術(shù)可以根據(jù)視窗的大小改變網(wǎng)站的呈現(xiàn)方式。下圖是響應(yīng)式布局在不同屏幕分辨器中的呈現(xiàn)，它同時兼顧了網(wǎng)站內(nèi)容的可讀性和布局格式的一致性。

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

問題1.菜單分行

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

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

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

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

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

問題3.元素失真

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

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

本篇文章只討論了響應(yīng)式網(wǎng)站設(shè)計中可能會遇到的3個問題，但是做出一個優(yōu)秀、成功的網(wǎng)站我們可能還會有很多彎路要走。怎樣才能有效避免可能遇到的問題呢?這需要我們好好規(guī)劃設(shè)計自己的網(wǎng)站，而且現(xiàn)在很多瀏覽器都內(nèi)置了響應(yīng)式布局測試，不斷的進行測試，我們就能逐漸做出自己滿意的網(wǎng)站，畢竟實踐是檢驗真理的唯一標準嘛。

分享文章：什么是響應(yīng)式設(shè)計？做響應(yīng)式設(shè)計時需要避免的常見誤區(qū)有哪些？
本文URL：http://muchs.cn/article16/cheedg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、營銷型網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站收錄、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)