2014-06-17 分類: 網(wǎng)站建設
響應式網(wǎng)頁設計方法,對開發(fā)人員很有幫助,因為他們允許我們服務內(nèi)容最廣泛的設備無需維護的網(wǎng)站的不同版本,并沒有一些負面的缺點,其他方法如縮放和流體布局。
本文將突出響應式網(wǎng)頁設計的3大錯誤,并將提供一些策略,讓網(wǎng)頁設計人員避免這些錯誤。
網(wǎng)頁設計尺度與流體與反應
有很多的困惑在這些條款和網(wǎng)頁設計師經(jīng)常錯誤地使用。事實上,這些都是在網(wǎng)頁設計布局技術已經(jīng)出現(xiàn)的進步,在線時間不同的進化步驟。
網(wǎng)頁設計縮放布局設計規(guī)模,每一個元素相對于所有其他元素。在這個意義上,他們將動態(tài)響應在視口的大小變化的內(nèi)容尺度響應。布局本身仍然是靜態(tài)的,變化的每一個元素的大小保持一致的外觀。
以上的例子有:網(wǎng)頁設計縮放在不同的分辨率的設計布局:犧牲可讀性的一致性。
網(wǎng)頁設計流體布局的不同是因為它們的規(guī)模容器元素相對于視口的大小,這是通過使用相對單位如EMS克服收縮文本的實現(xiàn)問題。網(wǎng)頁設計可以由用戶縮放它。
流體
以上的例子有:流體在不同的分辨率的設計布局:犧牲可讀性的一致性。
響應布局不不了什么。相反,他們改變了什么顯示根據(jù)視口的大小。
響應
上圖:一例響應在不同的分辨率的布局。
缺點1)包裝的菜單
如果你在你的網(wǎng)頁上使用的導航欄,一個響應式設計應該是“捕捉”到一個更緊湊的格式在頁面上顯示一個小屏幕。但這并不總是顯示面積比點更好的工作,但是太小,顯示在一行中的所有菜單項。
有幾種方法來解決這個問題。首先是減少由分類到類別和子類別,在導航欄上顯示的項目數(shù)的,你可以使用下拉菜單項顯示子類別時,選擇了一種類別。
二是改變點到一個較低的值。 使用的實際數(shù)量的寬度在你的導航欄開始,不是一個特定的設備尺寸。
第三種方法是使用一個不同的菜單的裝置,如滑動抽屜。
缺點2)網(wǎng)頁設計使用固定寬度圖像
內(nèi)容通常是設置一個尺寸相對于視口。所以,當一個固定寬度的圖像比面積大,圖像裁剪時。
滾動
上圖:一個壞的固定寬度的圖像太大,例如:現(xiàn)在有滾動條和內(nèi)容推離屏。
你可以通過使用相對單元設置圖像的寬度,避免這個問題,或者如果你使用一個支持它的框架(如Bootstrap)你可以使用響應的圖像類(如:class=“IMG回應”)。
調(diào)整大小
上圖:一個響應圖像類方法相同的元素:現(xiàn)在滾動條了。
缺點3)網(wǎng)頁設計的單元變形
這是一個比較模糊,但基本上會發(fā)生,你的網(wǎng)頁設計布局顯示在一個小的視口,內(nèi)容的失真,無意中改變你的網(wǎng)頁設計層次。
上圖:列成排,扭曲的內(nèi)容。
解決方案是顯而易見的,但令人驚訝的是有多少人與它斗爭:簡單的設置高度,寬度,和填充的元素明確。如果它移動了位置,包括其他的元素,你可以使它成為你想被包裝在一個div和設置頁邊距。
規(guī)劃有助于避免網(wǎng)頁設計錯誤
只有最常見的響應式網(wǎng)頁設計的缺點如何避免,但也有一個好的網(wǎng)頁設計,錯過了許多其他的方式。防止錯誤并不太難?,F(xiàn)代的瀏覽器都有內(nèi)置的響應布局測試,所以計劃您的網(wǎng)頁設計和測試通常是必須的。
網(wǎng)頁題目:響應式網(wǎng)頁設計的缺點如何避免
分享路徑:http://www.rwnh.cn/news49/20049.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供關鍵詞優(yōu)化、企業(yè)建站、微信公眾號、標簽優(yōu)化、微信小程序、移動網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容