靜態布局
-
描述：就是設定好的長和寬，大小不會改變，不管你多大的屏幕它都是那么大，分辨率是不會改變的
-
優點：這個對於開發者來說是最簡單的一種布局方式，沒有什么兼容性的問題
-
缺點：當屏幕分辨率太低時，會展現出滾動條
-
場景：傳統 web 網站
自適應布局
-
描述：不同屏幕分辨率下，保持原有展示方式。即元素的位置會變化而大小不會變化
-
優點：頁面能夠兼容不同分辨率的設備
-
缺點：屏幕太小會發生內容過於擁擠。所有的設備看起來都是一樣的網站，不過是長度或者圖片變小了，不會根據設備采用不同的展示樣式
-
場景：傳統 web 網站
響應式布局
-
描述：不同屏幕分辨率下，展示方式不同
-
優點：一套代碼兼容 web 端、平板、以及手機端網頁
-
缺點：工作量大、UI 設計也需要多個版本
-
場景：同時兼容多種不同設備
彈性布局（em/rem 布局）
-
描述：使用 em 或 rem 單位進行相對布局，在不同屏幕分辨率下頁面所有元素的高寬都等比例縮放
-
優點：所有屏幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應
-
缺點：這種布局方式只是寬度自適應，高度卻沒有做到自適應
-
場景：同時兼容多種不同設備
彈性布局（flex 布局）
-
描述：目前比較流行的一種布局，使用傳統布局難以實現一些復雜的布局，使用 flex 布局實現就變得非常容易
-
優點：簡便、完整、響應式地實現各種頁面布局
-
缺點：只兼容 IE10+的瀏覽器
-
場景：三欄式布局、垂直水平居中布局
流式布局（百分比布局）
-
描述：頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。主要特征是像瀑布一樣往下流，有規律的無限遍歷模塊。
-
優點：靈活，充分利用瀏覽器的空間
-
缺點：寬度按照屏幕進行適配調整，對於大屏幕來說用戶體驗並不是特別好，有些布局元素會顯得很長
-
場景：類似抖音視頻、微博消息、微信朋友圈等布局
文章的內容/靈感都從下方內容中借鑒
-
【持續維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues
-
【大數據可視化圖表插件】https://www.npmjs.com/package/ns-echarts
-
【利用 THREE.JS 實現 3D 城市建模（珠海市）】https://3d.noxussj.top/