響應(yīng)式網(wǎng)站建設(shè)有哪些誤區(qū)?
- 作者:新網(wǎng)
- 來源:新網(wǎng)
- 瀏覽:100
- 2018-04-09 16:29:40
現(xiàn)在很多站長在做網(wǎng)站時(shí)都比較傾向于響應(yīng)式設(shè)計(jì),這是因?yàn)橐粋€(gè)響應(yīng)式網(wǎng)站就可以完全適應(yīng)不同尺寸的設(shè)備。
現(xiàn)在很多站長在做網(wǎng)站時(shí)都比較傾向于響應(yīng)式設(shè)計(jì),這是因?yàn)橐粋€(gè)響應(yīng)式網(wǎng)站就可以完全適應(yīng)不同尺寸的設(shè)備。除此以外,響應(yīng)式網(wǎng)站也沒有縮放布局和流式布局的一些缺點(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ū)。
縮放布局VS流式布局VS響應(yīng)式布局
很多人經(jīng)常會(huì)弄混這三個(gè)概念,認(rèn)為它們都差不多,可以隨意替換使用。事實(shí)上,每一個(gè)概念都是不同的,都是不同科技發(fā)展階段流行的網(wǎng)站布局方式。接下來小編就帶大家看看這3種網(wǎng)站布局設(shè)計(jì)的區(qū)別。
縮放布局是指對(duì)網(wǎng)站中的每個(gè)元素進(jìn)行縮放。從某種程度上來說,縮放布局有點(diǎn)響應(yīng)式設(shè)計(jì)的味道,因?yàn)樗鼤?huì)根據(jù)視窗尺寸的改變相應(yīng)的縮放網(wǎng)站上的內(nèi)容。不過,它與響應(yīng)式布局的差別就在于,在進(jìn)行縮放時(shí),窗口整體布局是靜止不動(dòng)的,只改變網(wǎng)站里的每個(gè)元素,使它們協(xié)調(diào)一致。這種設(shè)計(jì)可以保證網(wǎng)站各種元素的協(xié)調(diào)一致,但這是以犧牲網(wǎng)站內(nèi)容的可讀性為代價(jià)的。
流式布局, 也叫作百分比布局,是指將元素的寬、高、內(nèi)邊距,外邊距設(shè)置成百分比,而不使用固定數(shù)值,這樣一來網(wǎng)站元素可以根據(jù)頁面的尺寸隨時(shí)調(diào)整。通常,隨著頁面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前頁尾,所以人們形象的稱之為流式布局。這種布局方式在
web前端開發(fā)的早期歷史上有很廣泛的使用,適用于不同尺寸的PC屏幕(那時(shí)屏幕的尺寸差異不會(huì)太大)。但是現(xiàn)在很多人使用手機(jī)瀏覽網(wǎng)頁,使用這種布局方式
設(shè)計(jì)網(wǎng)站,可能就會(huì)影響圖片、文字在小屏幕設(shè)備上的顯示效果,破壞網(wǎng)站的協(xié)調(diào)性、一致性。下圖是流式布局在不同屏幕分辨器上的呈現(xiàn),這種設(shè)計(jì)能夠提供用戶舒適的閱讀體驗(yàn)但是忽略了網(wǎng)站元素的整體一致。
響應(yīng)式布局是 隨著媒體查詢技術(shù)的出現(xiàn)而問世的,它主要是為了解決不同設(shè)備之間的兼容問題(一般是指PC,平板,手機(jī)等分辨率差異較大的設(shè)備)。這種技術(shù)可以根據(jù)視窗的大小改變網(wǎng)站的呈現(xiàn)方式。它同時(shí)兼顧了網(wǎng)站內(nèi)容的可讀性和布局格式的一致性。
免責(zé)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請(qǐng)發(fā)送郵件至:operations@xinnet.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),本站將立刻刪除涉嫌侵權(quán)內(nèi)容。