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

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

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

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

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

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

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

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

問(wèn)題1.菜單分行

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

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

問(wèn)題2.使用固定寬度的圖片

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

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

問(wèn)題3.元素失真

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

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

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

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

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

廣告

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