文章詳情頁
css - 對于有背景圖片的 的響應式布局 怎么來寫
瀏覽:162日期:2022-11-02 15:21:07
問題描述
類似這種 我現在想要做一個component 有背景圖 但是背景圖不能百分百大小 然后中間還要有內容 左邊圖片 右邊文字 如何來做響應式
問題解答
回答1:試試 background-size: cover;
回答2:background-position,和background-size配合使用,試過沒
回答3:你可以仔細研究下 Apple 的一些頁面,它的一些頁面就是使用了背景圖片且自適應的 —— 當然,它的布局也相對簡單。它的原理是就是 CSS3 Media Query。
我平時會用到 2 種方案:
12 列柵格布局系統(寬度、浮動、順序響應);
Media Query 適配(使用 position 屬性或 flex 布局、字號、適配的省流圖片);
如果是組件開發的話,你仍可以使用 props 來定義好行內參數,然后 component 內部判斷排版樣式(預設幾種版式);
對于背景圖片,你可以使用 background-size 或 background-position: center center 屬性來實現圖片自適應顯示(自動填充),也可以使用 Media Query 指定不同的設備上顯示的不同(如:desktop 圖片寬大于高、mobile 豎屏圖片高大于寬)圖片(節省流量)。
我覺得:盡量不要用背景來作為內容版式的一部分,除非設計師給你提供了足夠的圖片適配尺寸和方案!
標簽:
CSS
相關文章:
1. 注冊賬戶文字不能左右分離2. html - vue項目中用到了elementUI問題3. 對mysql某個字段監控的功能4. javascript - 數組的過濾和渲染5. javascript - table列過多,有什么插件可以提供列排序和選擇顯示列的功能6. python - 使用readlines()方法讀取文件內容后,再用for循環遍歷文件與變量匹配時出現疑難?7. showpassword里的this 是什么意思?代表哪個元素8. html5 - ElementUI table中el-table-column怎么設置百分比顯示。9. python - 為什么正常輸出中文沒有亂碼,zip函數之后出現中文編程unicode編碼的問題,我是遍歷輸出的啊。10. JavaScript事件
排行榜
