網(wǎng)站建設避免3種響應式設計災禍發(fā)布者：本站     時(shí)間：2022-03-23 13:03:49

響應式設計方法對開(kāi)發(fā)者非常有用，因為它使我們的內容在各種設備上廣為傳播。不用保留幾個(gè)獨立版本的網(wǎng)站，也可以摒除諸如縮放和流式布局這些方法的弊端。

本文重點(diǎn)討論設計師遇到最多的3個(gè)響應式設計問(wèn)題，也會(huì )提供一些規避錯誤的策略。

縮放、流式布局與響應式
這些術(shù)語(yǔ)容易造成混淆，設計師常常錯誤地交替互用。實(shí)際上，每個(gè)都是布局技巧的顯著(zhù)進(jìn)化過(guò)程，像技術(shù)演進(jìn)那樣逐一顯現。

縮放布局，旨在相對縮放每一個(gè)元素。它們會(huì )隨著(zhù)窗口大小變化動(dòng)態(tài)縮放內容，就這方面而言，它們是響應式的。布局本身保持靜止，通過(guò)改變每一個(gè)元素來(lái)保持一致的表現。

避免3種響應式設計災禍

上圖：不同分辨率下縮放布局的例子，這種設計為了統一犧牲了易讀性。

流式布局就不一樣，因為它們隨著(zhù)窗口尺寸縮放容器元素。通過(guò)em這類(lèi)相對單位可以做到這點(diǎn)，克服了縮小文字的問(wèn)題。用戶(hù)主動(dòng)縮放時(shí)，設計就被破壞了。

避免3種響應式設計災禍

上圖：不同分辨率下流式布局的例子，這種設計為了易讀性犧牲了統一。

響應式設計不會(huì )縮放任何東西。相反，它會(huì )根據窗口尺寸決定顯示哪些內容。

避免3種響應式設計災禍

上圖：不同分辨率下響應式布局的例子。

災禍1：菜單折行
如果在頁(yè)面頂部使用了導航欄，當頁(yè)面展現在小屏幕上時(shí)，響應式設計通常會(huì )把它“掰”成更緊湊的格式，但這并非總是有效，如果顯示區域比斷點(diǎn)更寬，又不足以在一行顯示所有菜單項的話(huà)。結果會(huì )導致菜單的折行。

避免3種響應式設計災禍

有些方法可以解決這個(gè)問(wèn)題。其一，減少導航欄中橫排菜單項的數量，將它們分門(mén)別類(lèi)。然后選中某類(lèi)時(shí)，你可以通過(guò)下拉菜單來(lái)顯示子類(lèi)。

其二，減少斷點(diǎn)的數值。應該以導航欄開(kāi)始出問(wèn)題的實(shí)際數值為準，而非具體設備尺寸。

其三，不同設備使用不同方式，例如滑動(dòng)抽屜。

災禍2：使用固定寬度圖片
內容區域通常都隨窗口尺寸變化。所以當固定寬度圖片超出顯示區域時(shí)，圖片就被裁剪了。

避免3種響應式設計災禍

上圖：糟糕的固定寬度圖片例子，它太大了。于是出現了滾動(dòng)條，內容被推到屏幕之外。

通過(guò)給圖片設定相對單位，可以避免這個(gè)問(wèn)題?；蛘呤褂弥С猪憫降目蚣埽ū热鏐ootstrap），使用響應式圖片class名來(lái)控制（例如class="img-responsive"）。

避免3種響應式設計災禍

上圖：同樣的元素，用響應式圖片class名的方式，滾動(dòng)條就不見(jiàn)了。

災禍3：元素的扭曲
這有點(diǎn)晦澀難懂，但本質(zhì)上，布局顯示在小窗口上的時(shí)候，所有未經(jīng)處理的列都會(huì )以行的形式呈現。這是個(gè)問(wèn)題，因為內容的扭曲會(huì )不經(jīng)意地改變設計的層級。

避免3種響應式設計災禍

上圖：列變成了行，扭曲了內容。

解決方法顯而易見(jiàn)，但令人驚奇的是，仍有很多人在糾結它：只要明確地設定元素的寬度、高度、內邊距。如果它移出所處位置，蓋住了其他元素，可以通過(guò)將它包裹在div容器中，設置外邊距，迫使它回到原本的地方。