国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

css - 對于有背景圖片的 的響應式布局 怎么來寫

瀏覽:162日期:2022-11-02 15:21:07

問題描述

css - 對于有背景圖片的 的響應式布局 怎么來寫

類似這種 我現在想要做一個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
相關文章:
主站蜘蛛池模板: 成人三级网址 | 99精品国产一区二区三区 | 午夜宅宅宅影院在线观看 | 欧美激情毛片裸推荐 | 久久精品免看国产成 | 欧美大尺度免费一级特黄 | 成人免费福利片在线观看 | 国产精品国产国产aⅴ | 免费欧美黄色 | 美国一级毛片免费 | 免费观看欧美成人禁片 | 国产精品免费大片 | 日本久久草 | www成人国产在线观看网站 | 日韩在线二区 | 国产三级麻豆 | 欧美成免费 | 成人国产三级在线播放 | 欧美成人伊人十综合色 | 国产成人精品免费视频 | 久久香蕉国产线看观看精品yw | 国产91在线精品 | 久草热线视频 | 亚洲日本在线观看网址 | 国产成人毛片亚洲精品不卡 | 午夜一级毛片免费视频 | 国产一区二区三区毛片 | 99久久综合精品免费 | 国产91成人精品亚洲精品 | 在线观看偷拍视频一区 | 日本成a人伦片 | 国产三级精品三级国产 | aaa毛片在线 | 国产大片线上免费观看 | 成人国产在线视频 | 真人真实毛片免费观看 | 欧美1| 国产亚洲男人的天堂在线观看 | 三级黄色高清视频 | 免费欧洲毛片a级视频无风险 | 国产91精品一区二区 |