国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-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
相關文章:
主站蜘蛛池模板: 久久免费观看视频 | 亚洲欧美精品一区二区 | 亚洲在线免费观看视频 | 免费鲁丝片一级观看 | 日韩成人毛片高清视频免费看 | 亚洲在线日韩 | 国内精品久久久久影院网站 | 欧美一级在线 | 久久精品免费观看 | 国产三级香港在线观看 | 91精品国产免费久久 | 成人欧美一区二区三区在线观看 | 久久一本综合 | 亚洲涩涩精品专区 | 国产欧美自拍 | 大臿蕉香蕉大视频成人 | 韩国日本一级毛片免费视频 | 国产精品久久久香蕉 | 日本三级网站在线线观看 | a级男女性高爱潮高清试 | 日韩一级黄色毛片 | 亚洲日韩精品欧美一区二区一 | 在线观看自拍视频 | 日韩欧美一级a毛片欧美一级 | 在线一区免费视频播放 | 久久精品亚洲一级毛片 | 国内精品1区1区3区4区 | 国产区二区 | 日本天堂网址 | 中文字幕综合在线 | 日韩在线看片中文字幕不卡 | 欧美高清性色生活片免费观看 | 日韩免费观看一级毛片看看 | 国产精品久久国产精品99 | 97成人在线视频 | 亚洲一区二区三区在线 | 久久99精品久久久久久野外 | 国产三级久久久精品三级 | 国产精品88 | xxxxfreexxxx人妖| 亚洲天堂一区 |