響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免

2014-06-17    分類: 網(wǎng)站建設(shè)

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)方法,對(duì)開(kāi)發(fā)人員很有幫助,因?yàn)樗麄冊(cè)试S我們服務(wù)內(nèi)容最廣泛的設(shè)備無(wú)需維護(hù)的網(wǎng)站的不同版本,并沒(méi)有一些負(fù)面的缺點(diǎn),其他方法如縮放和流體布局。
本文將突出響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的3大錯(cuò)誤,并將提供一些策略,讓網(wǎng)頁(yè)設(shè)計(jì)人員避免這些錯(cuò)誤。

網(wǎng)頁(yè)設(shè)計(jì)尺度與流體與反應(yīng)
有很多的困惑在這些條款和網(wǎng)頁(yè)設(shè)計(jì)師經(jīng)常錯(cuò)誤地使用。事實(shí)上,這些都是在網(wǎng)頁(yè)設(shè)計(jì)布局技術(shù)已經(jīng)出現(xiàn)的進(jìn)步,在線時(shí)間不同的進(jìn)化步驟。
網(wǎng)頁(yè)設(shè)計(jì)縮放布局設(shè)計(jì)規(guī)模,每一個(gè)元素相對(duì)于所有其他元素。在這個(gè)意義上,他們將動(dòng)態(tài)響應(yīng)在視口的大小變化的內(nèi)容尺度響應(yīng)。布局本身仍然是靜態(tài)的,變化的每一個(gè)元素的大小保持一致的外觀。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免

以上的例子有:網(wǎng)頁(yè)設(shè)計(jì)縮放在不同的分辨率的設(shè)計(jì)布局:犧牲可讀性的一致性。
網(wǎng)頁(yè)設(shè)計(jì)流體布局的不同是因?yàn)樗鼈兊囊?guī)模容器元素相對(duì)于視口的大小,這是通過(guò)使用相對(duì)單位如EMS克服收縮文本的實(shí)現(xiàn)問(wèn)題。網(wǎng)頁(yè)設(shè)計(jì)可以由用戶縮放它。
流體
以上的例子有:流體在不同的分辨率的設(shè)計(jì)布局:犧牲可讀性的一致性。
響應(yīng)布局不不了什么。相反,他們改變了什么顯示根據(jù)視口的大小。
響應(yīng)
上圖:一例響應(yīng)在不同的分辨率的布局。

缺點(diǎn)1)包裝的菜單
如果你在你的網(wǎng)頁(yè)上使用的導(dǎo)航欄,一個(gè)響應(yīng)式設(shè)計(jì)應(yīng)該是“捕捉”到一個(gè)更緊湊的格式在頁(yè)面上顯示一個(gè)小屏幕。但這并不總是顯示面積比點(diǎn)更好的工作,但是太小,顯示在一行中的所有菜單項(xiàng)。

有幾種方法來(lái)解決這個(gè)問(wèn)題。首先是減少由分類到類別和子類別,在導(dǎo)航欄上顯示的項(xiàng)目數(shù)的,你可以使用下拉菜單項(xiàng)顯示子類別時(shí),選擇了一種類別。
二是改變點(diǎn)到一個(gè)較低的值。 使用的實(shí)際數(shù)量的寬度在你的導(dǎo)航欄開(kāi)始,不是一個(gè)特定的設(shè)備尺寸。
第三種方法是使用一個(gè)不同的菜單的裝置,如滑動(dòng)抽屜。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免

缺點(diǎn)2)網(wǎng)頁(yè)設(shè)計(jì)使用固定寬度圖像
內(nèi)容通常是設(shè)置一個(gè)尺寸相對(duì)于視口。所以,當(dāng)一個(gè)固定寬度的圖像比面積大,圖像裁剪時(shí)。
滾動(dòng)
上圖:一個(gè)壞的固定寬度的圖像太大,例如:現(xiàn)在有滾動(dòng)條和內(nèi)容推離屏。
你可以通過(guò)使用相對(duì)單元設(shè)置圖像的寬度,避免這個(gè)問(wèn)題,或者如果你使用一個(gè)支持它的框架(如Bootstrap)你可以使用響應(yīng)的圖像類(如:class=“IMG回應(yīng)”)。
調(diào)整大小
上圖:一個(gè)響應(yīng)圖像類方法相同的元素:現(xiàn)在滾動(dòng)條了。

缺點(diǎn)3)網(wǎng)頁(yè)設(shè)計(jì)的單元變形
這是一個(gè)比較模糊,但基本上會(huì)發(fā)生,你的網(wǎng)頁(yè)設(shè)計(jì)布局顯示在一個(gè)小的視口,內(nèi)容的失真,無(wú)意中改變你的網(wǎng)頁(yè)設(shè)計(jì)層次。
上圖:列成排,扭曲的內(nèi)容。
解決方案是顯而易見(jiàn)的,但令人驚訝的是有多少人與它斗爭(zhēng):簡(jiǎn)單的設(shè)置高度,寬度,和填充的元素明確。如果它移動(dòng)了位置,包括其他的元素,你可以使它成為你想被包裝在一個(gè)div和設(shè)置頁(yè)邊距。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免

規(guī)劃有助于避免網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤
只有最常見(jiàn)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免,但也有一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì),錯(cuò)過(guò)了許多其他的方式。防止錯(cuò)誤并不太難?,F(xiàn)代的瀏覽器都有內(nèi)置的響應(yīng)布局測(cè)試,所以計(jì)劃您的網(wǎng)頁(yè)設(shè)計(jì)和測(cè)試通常是必須的。

網(wǎng)頁(yè)題目:響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的缺點(diǎn)如何避免
分享路徑:http://www.bm7419.com/news49/20049.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、企業(yè)建站微信公眾號(hào)、標(biāo)簽優(yōu)化、微信小程序移動(dòng)網(wǎng)站建設(shè)

廣告

聲明:本網(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)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司