響應式設計(Responsive UI design)是一種現代設計方法，随着移動設備的逐漸普及和Web技術的發展，跨端的Web開發需求将會越來越大。如何在多種設備上進行跨端的界面适配使得網頁适應不同設備，即根據設備的分辨率和縮放自動重新布局，就需要響應式設計。描述響應式界面最著名的一句話就是“Content is like water”，“如果将屏幕看作容器，那麼内容就像水一樣”。

響應式設計涉及不同屏幕大小的PC、手機、PAD等等，響應式界面有四個層次：1、同一頁面在不同大小和比例上看起來都應該是舒适的；2、同一頁面在不同分辨率上看起來都應該是合理的；3、同一頁面在不同操作方式（如鼠标和觸屏）下，體驗應該是統一的；4、同一頁面在不同類型的設備（手機、平闆、電腦）上，交互方式應該是符合習慣的。要自動斷定出那種設備，以及為每種設備都設計一套UI界面編寫一套代碼，似乎工程量很大，其實未必如此，今天咱們用一種最簡單的實現方法，探究一下響應式UI設度。

首先，引入一張美食圖片。

例一：

引入一張美食圖片

模拟手機界面轉置頂

您可以看到，引入的美食圖片被包裹在一個Container容器組件當中，并且寬和高都已經被固定設置好，在手機屏幕中，這個容器組件置頂顯示，下方還有大塊空白，讓咱們繼續。

例二：

在美食圖片組件下方添加一個帶文字的卡片組件

文字顯示在美食圖片的下方

因為手機屏幕是長方形，所以文字組件排列在美食圖片的下方。讓咱們繼續再添加一個相同的美食圖片，按順序它會由上至下排在文字組件的下方。

例三：

再添加一個相同的美食圖片

按順序它會由上至下排在文字組件的下方

至此，咱們把浏覽器界面拉長，而把高度縮小，模拟一個寬度大于高度的平闆電腦。看看會不會有什麼變化。

例四：

模拟一個寬度大于高度的平闆電腦

組件的順序并沒有因為屏幕長寬大小而發生變化，隻不過把組件移到了屏幕的中間，這可不是咱們想要的響應式設計的結果，按照響應式設計原理，手機換成平闆電腦時，裡面的元素組件應該是橫着排列才符合正常的審美和舒暢。不用着急，您可使用一個魔術方法，用一個OverflowBar容器把所有的元素組件都包裹住，看看有什麼新的變化。

例五：

用一個OverflowBar容器把所有的元素組件都包裹住

奇迹出現了

奇迹出現了，元素組件的大小一樣，但是順序自動由豎轉為橫向排列，并充滿了整個屏幕。這樣看起來舒适多了，這就是響應式設計的魔力。

當然，OverflowBar容器方法隻是一種輕松的懶人方法，生産中的完整的響應式設計流程，還涉及到媒體查詢、斷點設置、不同設備的布局，如果用CSS來寫不是一篇文章能寫得完的。而用OverflowBar容器，就能巧妙地達到目的，而且還能延伸出很多種變化應用。

優美的應用體驗，來源于程序員對細節的處理。這就是今天學習Dart的内容，如果您感興趣，或者能對您有所啟發，别忘了幫忙點贊支持。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!