#類似這種 我現(xiàn)在想要做一個(gè)component 有背景圖 但是背景圖不能百分百大小 然後中間還要有內(nèi)容 左邊圖片 右邊文字 如何來(lái)做響應(yīng)式
3
0
0
走同樣的路，發(fā)現(xiàn)不同的人生
background-position，和background-size搭配使用，試過(guò)沒
你可以仔細(xì)研究下 Apple 的一些頁(yè)面，它的一些頁(yè)面就是使用了背景圖片且自適應(yīng)的 —— 當(dāng)然，它的佈局也相對(duì)簡(jiǎn)單。它的原理是就是 CSS3 Media Query。
我平常會(huì)用到 2 種方案：
12 列柵格佈局系統(tǒng)（寬度、浮動(dòng)、順序響應(yīng)）；
Media Query 適合（使用 position 屬性或 flex 佈局、字號(hào)、適配的省流圖片）；
如果是組件開發(fā)的話，你仍可以使用 props 來(lái)定義好行內(nèi)參數(shù)，然後 component 內(nèi)部判斷排版樣式（預(yù)設(shè)幾種版式）；
對(duì)於背景圖片，你可以使用background-size 或background-position: center center 屬性來(lái)實(shí)現(xiàn)圖片自適應(yīng)顯示（自動(dòng)填充），也可以使用Media Query 指定不同的設(shè)備上顯示的不同（如： desktop 圖片寬大於高、mobile 垂直螢?zāi)粓D片高於寬）圖片（節(jié)省流量）。
我覺得：盡量不要用背景來(lái)作為內(nèi)容版式的一部分，除非設(shè)計(jì)師給你提供了足夠的圖片適配尺寸和方案！
