如上需要對頂部的內(nèi)容進(jìn)行大小屏幕自適應(yīng)有如下幾種方案,爭對PC端而言
方案一咖摹，按照寬高比例去使用%，每個父級元素都寫寬度
思想：控制元素寬度變化婶芭，實(shí)現(xiàn)自適應(yīng)寬度东臀。
缺點(diǎn)：內(nèi)容過多時，內(nèi)容出現(xiàn)框內(nèi)放不下犀农，出現(xiàn)縱向紊亂問題惰赋。
現(xiàn)象：縮放比變化時。每個寬度越來越大，每個寬度越來越小赁濒。
h1 500/1920 * 100 %
nav
div
方案二轨奄，最大寬度最小寬度實(shí)現(xiàn)布局，每個子集元素都寫寬度
思想：控制間距變化拒炎，實(shí)現(xiàn)自適應(yīng)寬度挪拟。
缺點(diǎn)：最父級元素最小寬度放不下內(nèi)容問題，內(nèi)容根據(jù)背景圖放哪里位置不對問題击你。
現(xiàn)象：縮放比變化時玉组。屏幕每個內(nèi)容間距變稀疏，每個內(nèi)容間距變得密集丁侄。
min-width: 最小寬度大泄喏ā：800
max-width：最大寬度大小 ：1920
解決方案：兩者結(jié)合實(shí)現(xiàn)適應(yīng)性布局
方案一：也可以使用min-width跟%結(jié)合
方案二：也可以使用min-width跟flex結(jié)合
/* 子元素限制了最小寬度是1602 + 2832 + 498 = 1384 */
所以其實(shí)最外層的框min-width是不用寫的
當(dāng)然你也可以使用min-width+vw,一個思想，好啦以上的方案就是我的全部方案啦鸿摇，實(shí)現(xiàn)效果跟禪道的頂部布局效果一模一樣石景。
