今天我們要學習的是頁面布局中一個很重要的布局–響應式布局。基本上每個項目都需要做這樣一個布局，因為設備屏幕解析度的多樣性，我們必須做一些兼容性的體驗，也就是響應式布局。
響應式效果展示
效果分析：隨著設備窗口尺寸的變化，會做出適合當前窗口尺寸的布局方式。比如當你窗口一行顯示不了三個卡片時，會變為兩個一行或者一個一行。這就是我們說的響應式布局。
ps：這邊拓展一個容易混淆的概念–自適應布局。
1、響應式布局就是實現不同屏幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是一個網站能夠兼容多個終端，而不是為了每一個終端做一個特定的版本。
響應式布局案例
2、自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端設備上的新網頁設計方式及技術，它需要開發多套界面來適應不同的終端。
自適應布局案例
代碼實現
在我們看到響應式布局效果和搞清楚概念後，我們一起來看下上面效果圖中的實現代碼。
代碼分析：這邊主要是看 .city 這個類的樣式（css），有用到一個css屬性：浮動（float）。在代碼中我們可以看到 .city 類下有一個 float: left; 代碼段，這邊指的是當前Dom元素脫離文檔流往左邊浮動，可以簡單理解為離地往左邊飛。因為離地浮起來了，多以當空間（窗口寬度）不夠用是嗎，就會被擠到下一行。
結語
在實際項目開發中會運到很多這樣的場景，所以這是一個必須掌握的知識點。希望大家務必需要多花點心思，如果有遇到什麼問題可以隨時私信我。
歡迎諮詢討論，感謝你的觀看。。。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/233105.html
微信掃一掃 
支付寶掃一掃 